CSS Advanced Topics

CSS Rounded Corners

A web developer can give any element rounded borders using border-radius CSS property. The following are some div elements styled with rounded corners:

You can also specify each corner of an element with different border radius such as the following:

This div has different border radius values for each corner. The sequence is top-left, top-right, bottom-right, and bottom-left.

This div has three border radius values. The first is for top-left corner, second is for top-right and bottom-left corners, and last is for bottom-right corner.

This div has two border radius values. The first is for top-left and bottom-right corners and the second is for top-right and bottom-left corners.

This div has one border radius values and it applies to all of its corners.

The last example is creating elliptical borders. You need the syntax of "border-radius = a / b" where a and b are lengths which are divided. You can just also add a percentage. See the following examples.

This div has a border radius of 15px / 50px.

This div has a border radius of 50px / 15px.

This div has a border radius of 50%.

CSS Border Images

Web developers can also use images as borders for an element thru the use of the border-image CSS property.

Here is the original image:

In this next example, the middle section of our image is stretched instead of it being repeated.

CSS Multiple Backgrounds

We can also have multiple backgrounds just by adding commas inside the background-image property value. In our example below, we have added two images which is a paper background and a flower background.

You can also style the size of the background image using the background-size CSS property. In the example below, the flower background is reduced to only 100px by 80px.

There also two possible background size value available: contain and cover. The main difference between the two is that contain makes sure the background image is as large as possible but still keeping the width and height inside the element. The cover value, on the other hand, makes the background image cover all of the element even if its width and height is outside of the elements borders.

This div has a background image with "contain" as its background size.

This div has a background image with "cover" as its background size.

This div has a background image with no background size set.

This div contains the original size of the background image.

For the next example, we will try to attached a fixed and centered background image to the entire browser window. For this, we will utilized the iframe element to show a webpage with full image as its background.

You can also create a hero image (background image and text) with this technique. Using a div, insert it with a background image that covers all of its area and a text like so. This can be useful for creating portfolio websites for aspiring frontend developers. See an example webpage below:

By default, the background image border has background origin of padding-box. Meaning, the background image covers up until the edge of the padding. However, you can change this by increasing its reach up to border-box or decreasing its reach to just up to content-box.

This div has a background origin of default (padding-box) for background image.

This div has a background origin of border-box for background image.

This div has a background origin of content-box for background image.

The next CSS property is the background-clip. This clips or cuts off any excess background image or overflow. By default it is set to border-box, but this can also be set to padding-box or content-box.

The background clip here in this div is set to default (border-box).

The background clip here in this div is set to padding-box.

The background clip here in this div is set to content-box.

CSS Color Keywords

There are other ways to add color to an element such as using color keywords. There are three which are transparent, currentcolor, and inherit. The first one, transparent, is showed below:

This p element has a semi-transparent color background.

This p element has a fully transparent background.

The next one is currentcolor value. Read the examples below:

This div border color will be the same as the text color in this p element since it is nested inside it and uses the currentcolor value.

Parent div text color...

This div background color will be the same as the text color of the parent element's text color which is orange.

In this last div, its border color and shadow color is set to the current color value of its parent element which is orange.

The last color keyword is inherit which implicitly inherits its value from the parent element. This can be used to any other html element other than color.

In this sentence, the word "different" is inside a span element and will be designed with the same border values as its p parent element.

CSS Gradients

There are three types of CSS gradients: linear, radial, and conic. The first one is linear which needs at least two colors and a direction. The default top to bottom direction will be implemented if no direction is stated.

This p element has a background image of linear gradient going from top to bottom (default).

This p element has a background image of linear gradient going from bottom to top.

This p element has a background image of linear gradient going from left to right.

This p element has a background image of linear gradient going from right to left.

You can also direct the gradient diagonally like so.

This p element has a background image of linear gradient going diagonal from top-left to bottom-right.

This p element has a background image of linear gradient going diagonal from bottom-right to top-left.

You can also specify the angle of direction the color is going. For instance: 0 deg = to top; 90 deg = to right; 180 deg = to bottom, etc.

This p element has a angle of 69 deg (near to top-right) for its linear gradient direction.

Using multiple color stops for a linear gradient can also be utilized. Below is an example p element that has all the colors of the rainbow.

A p element with a rainbow background.

You can also make the gradient color stops transparent creating a fade effect.

A p element with a rainbow background and fade effect.

You can also repeat gradient colors by using the repeating-linear-gradient() value.

Radiant gradients are defined by its center that radiates color outwards. This gradient must at least have two colors. By default, the shape is an ellipse, the size is farthest-corner, and the position is center.

Default radial gradient

Radial gradient with differently spaced color stops for red, yellow, and green.

You can also change the shape to circle instead of the default ellipse.

We can also specify the size of our gradient relative to its element size. By default it is set to farthest-corner meaning the radial gradient will stretch to up to the farthest corner of the element. To see this more clearly, we will set the position of our radial gradient to be off center.

This is the farthest-corner size (default).

This is the closest-corner size.

This is the farthest-side size.

This is the closest-side size.

Just like linear gradients, you can also repeat radial gradients.

The last type of gradient is the conic gradient. Conic gradients requires at least two colors. Its default starting angle is 0deg (top) rotating clockwise, and default position is center. Below is an example of a default conic gradient with red, yellow, and green as color stops.

Default conic gradient:

Conic gradient with different color stop spacing specified by degrees:

A pie chart look for our conic gradient:

A pie chart look with specified degrees for each color stop:

You can also change the start angle of the conic gradient and the position of the center of the conic.

This conic gradient has an angle start of 90deg:

This conic gradient has its center position moved:

Just like linear and radial gradient, you can also repeat conic gradients like so.

Default repeating conic gradients:

Repeating conic gradients with defined color stops:

CSS Shadow Effects

In this section, we will learn how to use text-shadow for text and box-shadow for other elements. First, let's learn the basics of text-shadow:

This text has the basic text shadow style with 2px of horizontal shadow and 2px vertical shadow.

This text has its text shadow color styled to black!

This text has its text shadow color styled to black and blurred!

This text has a white color with a blurred black shadow.

This text has the red neon glow shadow effect.

Naruto summoning shadow clones. You can also add multiple shadows not just one just like Naruto!

This text has multiple shadow effects.

This text has white text color with black, blue, and darkblue shadow effects.

This text utilizes text-shadow by making it look like it has a border around its text.

Box-shadows, on the other hand, are used to apply shadows on elements. It has a requirement of at least a vertical and horizontal shadow. Its default shadow color is the current text-color inside the element.

This div element has a default box shadow with 10px horizontal and 10px vertical.

This div element has a box shadow with a specified color of orange.

This div element has a box shadow with a blur effect (the higher the value, the greater the blur).

This div element has a box shadow with a spread effect (positive value increases the size of the shadow, negative value decreases the size of the shadow).

This div element has the inset value enabled which makes this div has an inner shadow and not an outer shadow.

Just like text-shadow, you can also add multiple box-shadows just like the example div elements below:

This div element has multiple box shadows.

This div element has multiple box shadows and are blurred.

You can also apply box-shadows to make cards in webpages such as a text card or an image card. Hover over the images to see the box shadows.

April 16, 2025

Boracay Island, Philippines

CSS Text Effects

These are the CSS text overflow, CSS word wrap, CSS line breaking rules, and CSS writing modes. First, we will discuss the basics of text overflow. Text overflow has two values which is clip and ellipsis. Try to hover over the two p elements to see the overflow content.

The text overflow here is clipped. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aut totam saepe molestias minima fuga harum nihil exercitationem. Consequuntur iure soluta cupiditate cumque aliquam eveniet esse quas vero impedit ab.

The text overflow here is rendered as ellipsis (...). Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aut totam saepe molestias minima fuga harum nihil exercitationem. Consequuntur iure soluta cupiditate cumque aliquam eveniet esse quas vero impedit ab.

Some words may be too long for the normal wrapping of text to not work properly which results to the overflow of that word. Using CSS word break, we can force these certain long words to break and wrap into the next line.

This word pneumonoultramicroscopicsilicovolcanoconiosis is super long! We need to use CSS word break and the value break-word for this to work. Hover over this p element to break the word!

There are also other values for the CSS word break such as the keep-all and break-all.

This paragraph uses the keep-all value for word break. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem modi sint doloremque odit aut voluptates eius accusamus atque, error quasi quisquam? Voluptates accusamus maxime illum, est blanditiis eius molestiae consequatur!

This paragraph uses the break-all value for word break. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem modi sint doloremque odit aut voluptates eius accusamus atque, error quasi quisquam? Voluptates accusamus maxime illum, est blanditiis eius molestiae consequatur!

The last CSS text effect is the CSS writing mode. This specifies whether lines of text are laid out horizontally (horizontal-tb) or vertically (vertical-rl).

This sentence is in the default writing mode (horizontal-tb).

This sentence is in the vertical (vertical-rl) writing mode.

CSS 2D Transforms

This section we will learn about the CSS transform property which have a plethora of values such as translate, rotate, etc.

For the first one, we will use the translate() value which moves the following div from its original posiiton.

Hover over me to move 100px to the right and 20px down.

We can also use the transform: translate() property to center a child div element inside a parent div element. All children of the child div element will also be centered.

I am the parent div!

What a beautiful day this is!

Hello my name is Ronald. What's yours?

Nice meeting you!

I am the child div!

The next transform value is rotate() which rotates an element clockwise or counterclockwise depending on the given degree.

Hover over the div below to rotate it by 360 degrees clockwise!

Using negative deg values, hover the div below to rotate it by 360 degrees counterclockwise!

The scale() function for our next transform value changes the size of an element. It can change their width and/or height by adding a comma inside the function. Take note that the scaled element does not take any space if hovered.

Hover over the surprised cat to increase its size and more!

Next, hover over the image below to learn a great self-defense move while it scales down:

Sometimes when we scale the element out of proportion. Example is when we only scale the width of the element by using the scaleX() function just like the examples below. Hover it to stretch its width. Hover the second div to make it look thinner!

I'm a paragraph inside this div element! Hover to stretch me!

I'm a paragraph inside this div element! Hover to make me thin!

This also applies to the y-axis. Make Kevin Hart and Yao Ming taller and shorter respectively by hovering over them.

I want to be tall!

I want to be short!

The next transform function is skew(). Similar to the scale() function, you can also do skewX() and skewY(). This function skews an element along the x-axis or the y-axis at a given angle just like the examples below. Hover over them to see the results.

This div has a skew along the x-axis with a value of 20 degrees.

This div has a skew along the y-axis with a value of 20 degrees.

This div has a skew along the x-axis and y-axis with a value of 20 degrees.

The last transform function is the matrix() function. This just uses all the other transform functions into one. The syntax is matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

CSS 3D Transforms

This CSS property is much like the 2D transform but instead you can transform elements in 3D space.

The first one is the rotateX() function. Try to hover over the cat picture to rotate it around its x-axis.

The second one is the rotateY() function. Try to hover over the next cat picture to rotate it around its y-axis.

The last one is the rotateZ() function. Try to hover over the last cat picture to rotate it around its z-axis

CSS Transitions

CSS transitions allows the web developer to have smooth transitions of changing elements.

Let's start with a simple transition which is changing of widths. Hover over the image below to lengthen its width smoothly.

You can also add transitions to multiple CSS properties. Like for example, the same picture but we will change both the width and height of the movie poster below:

The next property for this section is the transition-timing-function. This is comprised of linear, ease (default), ease-in, ease-out, and ease-in-out. These are showcased below.

Hover over each of the rock images below to see the different transition-timing-function values.

Linear transition timing specifies the same speed for the whole transition.

Linear Transition

Ease transition timing is the default which has a slow start, then fast, then end slowly.

Ease Transition (Default)

Ease-in transition only has a slow start.

Ease-In Transition

Ease-out transition only has a slow end.

Ease-Out Transition

Ease-in-out specifies a slow start and slow end.

Ease-In-Out Transition

We can also delay the transition effect by using the transition-delay property.

Hover over the image of Nikocado Avocado below and see him change after a one second delay since he is always two steps ahead.

CSS Animations

CSS animations allows the web developer to apply animations to elements without the use of JavaScript. The requirement here is to specify keyframes for the animation to work. Animation also goes off without a trigger such as a hover over an element trigger. After the animation finishes, it goes back to its original state.

This div element has its background color change from blue to red in five seconds!

The "from" and "to" statements in the @keywords property is actually 0% and 100% progress of the overall animation duration. We can use this to add in extra colors when the animation progression/duration reaches 25% and 50%.

This div element has its background color change from blue to green to yellow then to red in four seconds!

You can also add other CSS properties in the animation. Below is a div box that goes from top-left to top-right to bottom-right and lastly back to top-left while changing its colors in the process!

You can also add the animation-delay property to delay the start of the animation. You can also put a negative value for animation-delay which advances the animation start. Lastly you can add the animation-iteration-count which can be added up to infinity. The previous animations above have infinite values for their iteration for showcasing purposes.

For the next property, we will use animation-direction which we can change to normal (default), reverse, alternate, alternate-reverse. These values indicate how the animation will be done. See below how these animation-direction are different from each other.

Normal

Reverse

Alternate

Alternate-Reverse

Just like the transition-timing-function, we also have the animation-timing-function and works just like the values in previous timing function.

The last property for animations is the animation-fill-mode. This property specifies the style of an element when the animation is not playing e.g. the style before it start, after it starts, or both. There are four values for animation-fill-mode which are none (default), forwards, backwards, and both. The following div boxes will turn red, then green, blue, and lastly yellow while moving from left to right. Refresh the page to start the animations.

None is the default value which does not apply any styles to the element before or after it is executing:

Forwards applies and retains the last style of an animation to the element after it is executed:

Backwards applies and retains the first style of an animation to the element before it is executed (during the animation delay period). Even though the div box is styled as having a red background color, the backwards value tells the div box to have a purple background color instead for the delay period of two seconds:

Both applies and retains the first style of an animation to the element before it is executed (during the animation delay period) and the last style of an animation to the element after it is executed:

CSS Image Styling

Images can also use border radius properties to create rounded images just like the following:

You can also add actual borders to the image to make a thumbnail effect. For this example, we will use an image as a link with the thumbnail effect.

Responsive images are images that adjusts its size depending on the browser window size. Also, you can limit the maximum width size of an image to its original size so it will not be too stretched out too far.

Resize the window and see how the image reacts.

We can also make responsive polaroid images or cards like so:

TWICE Members

We can also add text in images and position them wherever we like.

The famous Japanese stairs location from the anime movie 'Your Name'.

Top Left

Top Right

Center

Bottom Left

Bottom Right

There are other cool things you can do with image styling such as the image hover overlay. Hover over each of the following images to see their effects:

Fade In Text:

Aran from 'FIFTY FIFTY' K-Pop girl group.

FIFTY FIFTY - Aran

Fade In A Box:

FIFTY FIFTY - Aran

The following photocards has a slider effect when hovered.

Slide From Top

FIFTY FIFTY - Aran

Slide From Bottom

FIFTY FIFTY - Aran

Slide From Left

FIFTY FIFTY - Aran

Slide From Right

FIFTY FIFTY - Aran

You can also flip images with image styling using the scaleX() function in transform property and using a value of negative one:

For the next one, we will create a responsive group of photocards which changes layout depending on browser window size. Try to resize the your browser window.

Hero Name: Creati

Hero Name: Froppy

Hero Name: Uravity

Hero Name: Grape Juice

For the last one, we will try to do an advanced topic which is the image modal (dialog box). We will use a little bit of JavaScript to work this modal out.

CSS Image Centering and Filters

There are multiple ways in centering images horizontally. The following are the ways of centering an image horizontally:

We can use the CSS property "margin" and then set it to auto. For this to work, we need to make the display of the image to block since this images have inline display as default. Then lastly we need to specify a width smaller than its parent elements width size like so.

The second way is to set the display of the element container of the image to flex then set the justify-content to center. Same with the first one, we should set the width of the image to be smaller than its parent element's width.

The following are ways to center an image vertically:

We can use flex again to center an image vertically by adding the align-items property and setting it to center. also make sure to define the height of the image to be smaller than the height of its parent element.

There are many CSS image filter properties we can use to design our webpages. The following are the list of the said properties:

The first image filter property is blur(). This property blurs out the image. Larger values equates to greater blurs.

The next image filter property is brightness(). The values over 100% makes the image brigher while values lower than 100% makes the images dimmer. 100% is the default value and 0% makes the image completely black.

The next one is contrast(). The default value is 100%. Greater than 100% results to higher contrast while lower than 100% results to lower contrast. 0% value makes the image grey!

The next one is drop-shadow(). Similar to box-shadow, we can use the filter property value of drop-shadow() for the images to cast a shadow behind like the following images.

Next is grayscale(). The value of 100% makes the image completely grey and a value of 0% has an effect of none.

The next one is hue-rotate(). This applies a color rotation to an image with the set degree value. A positive degree value increases the hue value, while a negative degree value decreases the hue value. Zero degrees represent the original image.

The next one is invert(). This inverts the color of an image. A value of 100% makes the image color completely inverted while a value of 0% will have no effect.

The next one we are more familiar with which is opacity(). The value of 100% will have no effect on the image while 0% makes it transparent.

The next one is saturate(). Saturation of an image refers to the color intensity of the image. The value of 100% is the original image while the value of 0% makes the image in the color grey. A value of more than 100% makes the color more intense.

The last image filter property is sepia(). This property makes the image warmer with a yellow brown tone to it. A value of 100% make the image completely sepia while 0% has no effect.

CSS Image Shapes

The CSS clip-path property clips or shapes the image element. The first clip-path property function is circle(). See the example images below:

The image below uses the clip-path property with a circle(50%) as value making it a circle:

Since the original image (see below) is not perfectly a square for the circle(50%) to work and render the image to be a perfect circle, we will use a certain technique.

We will first wrapped the image in a div, style it to a perfect square box and set the overflow to hidden. Then set the border-radius of the div element to 50%. Add a margin if the image is not aligned in center.

For convenience purposes and to be able to use the clip-path property and circle(50%) value, we will use a square image:

Applying the clip-path property and circle(50%) value, we will get:

Other than this, we can also specify the position of the center of the circle with a length or percentage value or just left, right, top, bottom words. The following images have different center positions for the circle:

The next one is the shape-outside property which lets you define the line wrapping shape around the clipped image.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, quod! Fuga a voluptate autem. Molestiae ipsa quis saepe, dolores recusandae doloremque ad velit sint totam temporibus natus tempora nulla praesentium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt animi ipsa soluta reprehenderit praesentium in! Explicabo dicta maiores, fuga obcaecati sequi quia consectetur at iste possimus, odit, modi tempore numquam!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium vero repudiandae laboriosam dolores officiis et. Nostrum impedit quia natus vitae, ipsam temporibus molestiae, corrupti eveniet laudantium sequi voluptas. Culpa, debitis?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda veniam consequatur quisquam in. Nihil, distinctio provident hic rerum ipsa dicta, praesentium cupiditate tempore mollitia maiores ad fuga cumque, totam velit! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed sit molestiae ducimus. Nemo, impedit dolores reprehenderit illo cum voluptas sapiente, officiis dolorem ipsa sunt voluptate. Vitae, impedit sunt! Ipsa, est! Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore consequuntur deserunt doloribus! Commodi accusamus, consequatur tempora odio, vero porro id dolores non suscipit quam sit. Autem cupiditate repellat sint esse!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat dicta incidunt blanditiis quos. Delectus, libero dignissimos. Alias amet autem pariatur quidem, veniam velit quis fuga voluptatem maxime cumque nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum unde, magni maxime facere animi placeat perspiciatis molestiae excepturi. Molestias possimus, recusandae in nisi illo assumenda animi esse quaerat obcaecati repellendus.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati harum perspiciatis iure voluptates sapiente. In non possimus placeat temporibus pariatur laudantium rem sint voluptatem officia ea impedit, maxime enim odit.

The next value for the CSS clip-path property is ellipse(). This lets you add a radius for both the x and y axis:

The following image has an ellipse(50% 40%) value for its clip-path property:

Just like with circle() value, we can also specify the center position of our ellipse in our image:

Lastly, we can also wrap the text around ellipse shaped image thru shape-outside property with ellipse() as its value

The last value for the clip-path property is polygon(). This clips the image into polygons by entering the x and y coordinates. The top-left corner of the image represents (0%, 0%) while the bottom-right corner of the image represents (100%, 100%).

The images below are shaped into polygons:

CSS Object Fit and Position

Sometimes the images that is inside the container loses its aspect ratio if and are stretched. A solution is using the CSS property: object-fit. Take note, this property is directly applied to the image itself and we do not need a separate element container. See below the pictures with their different object-fit values:

This following image has original dimensions of 1920px by 1080px. However to fit this div container, we set it up to only 100% of the width size of its parent element and its height in auto:

For the first one, we will use fill which is the default value. The image is resized to fill the given width and height values no matter if it is squished or stretched.

The next one is cover. It fills the given dimension but it keeps its aspect ratio.

Third is contain. This object-fit value keeps the aspect ratio of the image but is resized to fit the given dimension:

Next is none. If we use none, the image will not be resized and will just be center presented inside the dimensions set.

Last is scale-down. The image will be scaled down to the lowest version of none or contain.

Sometimes when we use object-fit property values such as cover, the image is not set to what we want our users to see. A part of the image will be clipped for example. That's where we will use the object-position property by specifying the x and y coordinates we want the users to see.

This will be the original image we will be using for our example:

The image below is a set of images sliced and put together. These images have a cover value for their object-fit property. However each have different points of focus using different object-position values.

CSS Masking

CSS masking lets you partially mask over an image rendering some parts not to be seen by the user by using the mask-image property. This property specifies a mask layer image. This mask layer can be a PNG image, SVG image, a CSS gradient, or an SVG mask element.

Below is the original image we will be using to put a mask on.

The first one that we will apply the mask-image property is a PNG image. This PNG image must have a fully transparent or semi-transparent area and a black area (where the image will be shown) to qualify as a mask layer.

Below is the image of Paris masked by the PNG image above.

The next mask-layer is using CSS gradients both linear and radial. We can apply the mask-image property for our images. We must add black as one of the color stops and a transparent color for the masking to work. Below is the linear gradient we will use:

Below is the image of Paris masked by the linear gradient above.

We can also use radial gradients like the example mask layer below. But this time we will not use a fully transparent color but a semi-transparent color to let the users see the rest of the image but with little focus.

Below is the image of Paris masked by a radial gradient.

The next one that we can use as a mask layer is SVG. Utilizing the SVG mask element, we can create different mask layers for our images. Below we created an SVG polygon in a shaped of a triangle with a white color fill.

Now, we will try to mask this over our Paris image using the svg mask element combination.

CSS Buttons

Buttons are commonly used in websites today. Below we will see how buttons can be styled using CSS.

We can change the background color of buttons like so:

Using the font-size property, we can change the size of our buttons like so:

We can also change the padding of our buttons to different sizes:

We can also use rounded corners for their borders:

Colored borders:

Hoverable borders:

Hoverable borders with shadow:

Styling disabled buttons:

Button width:

The CSS styles above are simple but we can also design buttons as groups for the advanced class.

We removed the margins first for the buttons and lay them side by side by floating them left to create a button group.

Bordered button group:

Vertical button group:

Button in an image:

We can also add animations to buttons.

Button with animated arrow when hovered:

Button with a pressed effect when clicked:

A simple fade in button:

Button with ripple effect:

CSS Pagination

If your website will be having multiple pages a simple pagination would be a good addition for easy navigation.

The following is a simple pagination made from anchor links:

« 1 2 3 4 5 6 7 »

We can upgrade this pagination by adding an active color on the current page and a hover background color change:

« 1 2 3 4 5 6 7 »

Now we can add rounded borders on our pagination:

« 1 2 3 4 5 6 7 »

We can also add borders for our pagination:

« 1 2 3 4 5 6 7 »

Adding margins between links to create space:

« 1 2 3 4 5 6 7 »

Lastly we can change the size of by increasing our font-size for each anchor link and centering it by using display flex:

« 1 2 3 4 5 6 7 »

The next are some applications of pagination:

The following is a simple next and previous button pagination:

← →

The next one is a simple navigation pagination:

Home Link 1 Link 2 Link 3 Link 4 Link 5

The last one is what's called a breadcrumb pagination:

Home
Pictures
Summer 15
Italy

CSS Multiple Columns

The CSS multiple columns allows the web developer to easily format the webpage like a newspaper. Now we will discuss each property for this CSS.

The first one is about making columns for an element by defining the number of columns the web developer wants to achieve:

Subheader

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur aperiam sit possimus totam eum aspernatur cum tempore quos iure ut veritatis beatae libero quibusdam, perspiciatis voluptates suscipit incidunt perferendis placeat? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus maxime dicta atque recusandae earum expedita fugit labore cumque molestias quae necessitatibus modi praesentium vel harum, vitae sequi repellendus aliquam similique?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero quidem incidunt ea in, illum aspernatur, sunt culpa quos, corrupti aliquam enim cum labore laborum molestiae sequi sapiente animi molestias ipsa?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores placeat fuga rem dolorum eius, veritatis esse eligendi temporibus eos quisquam omnis ut deserunt quasi molestias dolorem atque blanditiis nostrum possimus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta, laboriosam rem consectetur sed maiores excepturi tenetur dolore nam voluptatem quibusdam quod, odit fuga placeat corporis. At quas magnam dolore cum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, nisi nostrum modi fugiat animi error obcaecati esse saepe. Non veritatis qui sapiente totam repudiandae autem suscipit similique aperiam. Iure, eligendi!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur sit ab hic! Sed, voluptate temporibus, quibusdam optio dolorem possimus ea iste sapiente illo tempore dolorum odio. Voluptatem quibusdam quod excepturi!

Subheader

We can also specify the gap between these columns. See below how wide the gap is compared to the first one.

Subheader

Next, we can add the column-rule-style which in this case is solid:

Subheader

Column rules acts like a border and can be used shorthand. We can start by the dimensions of its width, the style, and then its designated color. For the element below, we will use 1px, solid, and red.

Subheader

If there is a head title for your element, we can use the column-span property for that specific element (usually the headers) to cover all the columns above.

The Daily Bugle

Subheader

We can also specify the column width and not specify column number. For this example, we will use the column width of 500px:

The Daily Bugle

Subheader

CSS User Interface

There are user interface properties in CSS such as resize and outline-offset.

In this first example we will use the resize property which allows users to resize elements in our webpage. Users can resize both its horizontal and vertical dimensions. Make sure to add overflow with value auto for the resize to function.

Resize me!

A div element which is restricted to only resize horizontally.

Resize me!

A div element which is restricted to only resize vertically.

Resize me!

The last one is outline-offset which creates a space between the element border and its outline.

This div has a 5px outline offset.

This div has a 10px outline offset.

This div has a 15px outline offset.

CSS Variables

The var() function is used to insert values of CSS variables. A great example of using the var() function is by using it for the colors of our webpage instead of copy pasting the colors over and over again.

First we need to know the syntax of using the var() function: var (--name, value). The --name part is required and will be the variable name and the value is will act as the fallback value if the variable is not found. There are two types of var() function which are the global and the local scope. The global scope variables can be accessed thru the entire document by using the CSS selector ":root {}" while the local scope variable can only be used under the local selector where it was declared e.g. "h2 {}".

The first one we will use is the global scope variable:

Global Variables

In this div element, we used the --myBlack, --myBlue, and --myGrey to as our var() values. This was first declared in our :root selector and assigned color values for the said names. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab atque dignissimos ea officia inventore odio, explicabo possimus similique non? Nulla sint mollitia vitae earum labore explicabo cum? Accusantium, eligendi nesciunt?

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil sequi, consequatur similique, ut voluptates repellat iste facilis earum molestiae rerum quam. Labore sunt perspiciatis reiciendis eaque numquam ipsum tempora tempore!

Usually the local scope variable is used to override the global variable by inserting the var() function to a specific element selector. For the second one we will use is the local scope variable:

Local Variables

In this div element, we used the --myBlack, --myBlue, and --myGrey to as our var() values from our global scope. Now we will change the color of the second paragraph with red thru the use of local scope while still using the name --myGrey.. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab atque dignissimos ea officia inventore odio, explicabo possimus similique non? Nulla sint mollitia vitae earum labore explicabo cum? Accusantium, eligendi nesciunt?

We can also manipulate our variables thru the use of JavaScript.

Getting, Changing, and Resetting Global Variables

In this div element, we will try to change the value of our global variable value (--myGrey) in our paragraph to color red thru the use of JavaScript.. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab atque dignissimos ea officia inventore odio, explicabo possimus similique non? Nulla sint mollitia vitae earum labore explicabo cum? Accusantium, eligendi nesciunt?

We can also integrate variables with media queries. Say for the local variable of the div element below, we will change its value if the browser window size is less than 600px thru media query.

Variables with Queries

The font size of all the elements here in this div is set by the local variable "--fontsize: 20px". This will be down to "--fontsize: 10px" if the browser window size is below 600px thru media query.

CSS @Property Rule

The @property will set your variables' default values, what property type is your variable (e.g. color, font-size, etc.), and if this property can inherit values or not.

For our first example, lets set our local variable (--myBackgroundColor) for our div element below to the color of darkblue. Then we will set the @property of our variable by setting its data type to color, its fallback or default color to blue, and make this property inheritable.

I am the parent div.

I am the child div. I inherited my parent's background color.

Next we will deliberately not set any value to our variable. This will force our created variable to fallback to its initial or default value we have set in our @property. Then we will override this default value for the rest of the paragraphs in the div element below:

Override Default Property Values

This paragraph has the "var(--textColor)" but is only using the default or fallback value of black from its @property setting. Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus eum quam sequi, possimus quod repellat temporibus corrupti consequatur totam in, ipsam, dignissimos incidunt quisquam modi. Autem dolorum ducimus commodi tenetur.

This second paragraph has overridden the default value by assigning a local variable specifically into this paragraph and setting the color to red. Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aperiam illo ipsa ab corrupti architecto porro, fugiat earum assumenda, inventore similique reiciendis id consequuntur quae modi libero deserunt explicabo voluptatem?

This third paragraph also overrides the default value by assigning a local variable specifically into this paragraph and setting the color to blue. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi voluptas officiis error aliquam labore explicabo repellendus veritatis quae incidunt corporis tempore tempora quos, eveniet ullam itaque obcaecati sequi pariatur inventore.

We can also utilized the @property value to set our colors with animation and keyframes. See the example div element below:

CSS Media Queries

Media queries are used by web developers for webpage adaptability. Media queries help make the webpage look cleaner and varied depending on the device of the user e.g. laptop, phone, etc. It acts like a checker for the current width and height of the viewport, the orientation of the device, and the resolution.

The following are useful tables for using media queries:

CSS Media Types
Value	Description
all	Used for all media type devices
print	Used for print preview mode
screen	Used for computer screens, tablets, smart-phones etc.

CSS Common Media Features
Value	Description
orientation	Orientation of the viewport. Landscape or portrait
max-height	Maximum height of the viewport
min-height	Minimum height of the viewport
height	Height of the viewport (including scrollbar)
max-width	Maximum width of the viewport
min-width	Minimum width of the viewport
width	Width of the viewport (including scrollbar)

With this, we need to learn the syntax of media queries:

@media not|only media type and (media feature) and (media feature) {}

Now we can start with a simple media query with the div below:

For the first one, will change the background color of the div below if the width of the viewport window or device is less than 600px:

Resize your browser window!

The next one is a bit advanced where we float a navigation menu to the left if the viewport width is greater than 1200px. Less than 1200px, the menu will not float but will stack on top of each other:

Please Resize the Browser Window

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ab delectus voluptate ut libero a expedita tempora et, necessitatibus ipsam, quis corporis quasi placeat omnis aliquid similique? Libero, adipisci repellendus! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit deserunt qui nam architecto non nisi consequuntur, magnam corrupti esse accusamus iusto, debitis provident ea praesentium exercitationem nobis, vitae incidunt nesciunt.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, assumenda aut iure quos recusandae voluptatem consequatur quas quibusdam blanditiis delectus alias officiis necessitatibus atque sed nesciunt eligendi saepe ducimus ab!

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente asperiores architecto dolorum quia deleniti dicta adipisci porro maxime impedit inventore consequuntur suscipit eius, possimus eligendi necessitatibus, aut at consequatur quas. Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, provident repellat sapiente ad nobis accusamus quod quae alias quam reiciendis, consequuntur sequi minima rem eos cupiditate similique numquam autem cum.

The next one changes background color two times depending on the browser size.

Resize your browser window!

We can also create responsive horizontal navigation menus which changes when the device is width is less than 600px which makes them stack on top of each other.

Resize your browser window!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, iste eos dignissimos cupiditate numquam qui mollitia ut nulla consectetur modi ex nisi et natus enim accusamus provident obcaecati harum repellat. lorem

Link 1
Link 2
Link 3
Link 4
Link 5

Next, we will create responsive column design which changes if the width is less than 992px and 600px.

Resize

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro magnam facilis doloremque error, ad sit dolore. Nemo aut, reiciendis in vero veniam excepturi, ad nihil nobis laudantium architecto odit cum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium temporibus dolor laudantium, eos explicabo iure omnis voluptas totam est quo expedita error nostrum ad officia obcaecati earum deserunt quod maxime! Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus nulla eos unde laudantium nostrum molestiae autem veniam aliquid eaque exercitationem illum asperiores non quo, dicta minus eius id doloremque dignissimos?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto soluta consectetur autem sunt culpa, doloremque porro facere. Natus non unde neque sed! Eveniet incidunt aut minus, iste nobis voluptatem nisi.

Your

Browser

Window

We can also use display flex to get the same results as the one above. Below is the same div but we have applied the responsive design using display:flex.

Resize

Your

Browser

Window

We can also hide elements using media queries. The spooky ghost below will be hidden when the screen width is equal to or less than 600px.

I will become hidden!

Also we can change the font-size of our elements base on the screen change using media queries.

I have a font size of 60px!

I have a font size of 30px!

A fun use of media queries is to use it for a responsive media gallery. See the photos below and resize the browser window to see its effects.

Now we will recreate a website layout with flex. Here we used the iframe element to showcase the responsive flex webpage. Try to drag the bottom part of the iframe below to resize it or visit the recreated website in a new window.

CSS Rounded Corners

CSS Border Images

CSS Multiple Backgrounds

CSS Color Keywords

CSS Gradients

CSS Shadow Effects

CSS Text Effects

CSS 2D Transforms

CSS 3D Transforms

CSS Transitions

CSS Animations

CSS Tooltip

CSS Image Styling

CSS Image Centering and Filters

CSS Image Shapes

CSS Object Fit and Position

CSS Masking

CSS Buttons

CSS Pagination

CSS Multiple Columns

Subheader

Subheader

Subheader

Subheader

Subheader

Subheader

Subheader

Subheader

The Daily Bugle

Subheader

Subheader

The Daily Bugle

Subheader

Subheader

CSS User Interface

CSS Variables

Global Variables

Local Variables

Getting, Changing, and Resetting Global Variables

Variables with Queries

CSS @Property Rule

Override Default Property Values

CSS Media Queries

Please Resize the Browser Window

Resize your browser window!

Resize

Your

Browser

Window

Resize

Your

Browser

Window