Posts

Showing posts with the label Cascading Stylesheet

CSS: Transform

-
CSS Transform I. What is CSS transform? transform  allows us to transform the elements differently, such as rotate, scale, move, skew, etc. transform  can have different values: translate scale rotate skew II. translate() With the  translate  value, we can move the element from one position to another on a webpage. If we want to move the element on the x-axis, we use  translateX To move the element on the y-axis, we use  translateY To move the element on both x-axis and y-axis, we use  translate(x,y) Example 1 : The image will be moved 200px to the right (with a positive integer). img { transform : translateX ( 200 px ); } Example 2 : The image will be moved 200px to the left (with a negative integer). img { transform : translateX ( - 200 px ); } Example 3 : The image will be moved 200px down (with a positive integer). img { transform : translateY ( 200 px ); } Example 4 : The image will be moved 200px up (with a negative integer). img { tr...
Post a Comment
Read more

CSS: Responsive Design

-
  CSS Responsive Design I. What is responsive design? We apply responsive design to ensure that a website is readable and visually appealing across all devices, regardless of screen size. Responsive design refers to the ability of a website to resize and reorganize its content based on: The size of other content on the website. The size of the screen the website is being viewed on. We also need to think about loading smaller images for mobile devices and user experiences on mobile. A popular approach for responsive design is a mobile-first approach, in which we plan our design for mobile devices first and then adapt them for a larger screen. II. Viewport meta tag The viewport meta tag is placed inside our  <head>  section and tells the browser what width the viewport should be. < head > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> </ head > Name attribute: viewport Content of this meta tag: The width=d...
Post a Comment
Read more

CSS: Flexbox

-
CSS Flexbox To create columns, we use Flexbox. display: flex By default, when setting  display: flex  on an element, all the children will become columns. . container { display : flex ; } display: inline-flex display: inline-flex  allows multiple flex containers to appear inline with each other. Flex containers can be nested inside each other by declaring  display: flex  or  display: inline-flex  for children of flex containers. justify-content We use a  justify-content  property to position the items from left to right. . container { display : flex ; justify-content : flex - end ; } There are five values for the justify-content property: flex-start : all items are positioned from the left of the parent container, with no extra space between or before them. flex-end : all items are positioned with the last item starting on the right side of the parent container, with no extra space between or after them. center : all items are positio...
Post a Comment
Read more