10 Advanced CSS Techniques

Border Radius

This h3 tag has a “border-radius” attribute of 12px, which will cause it to have rounded borders.

rgba Color

rgba < hexidecimal

The RGBA color system is another way of setting color, but takes 4 parameters, which will determine the color based on the inputted value based on how much red, blue and green you tell it to use. The fourth parameter defines the opacity, which will make the color set by the rgba color system be slightly more see-through based on the number inputted from 0-1.

Gradients

Gradients

Gradients are an advanced CSS technique that allows you to blend between two and more colors in certain patterns like linear, which the above gradient uses. Other gradients include “Radical” and “Conic”. You can also have repeating linear gradients, repeating radical gradients, repeating conic gradients and more.

Shadow

This text will have a shadow

The above text has a shadow attribute. The shadow attribute takes in 2 parameters, which will decide how many pixels the shadow will be different from the original on the x axis, and how many pixels it will be different on the y axis.

Reflected Images

This image is reflected using a -webkit attribute of “box-reflect”, which is set to right. This allows the image to be reflected to the right of the original.

Animations

The reason for this is due to an animation made using CSS. The animation has an entirely different “@keyframes” section that will show from where and to where the animation will play. This animation goes from a “font-size” of 50% and a “color” of red to a “font-size” of 100% and a “color” of green. The class that this div inherits from also includes key information such as the keyframes referral, which points to the keyframes called “coolanimation” and applies it to the element, and an “animation-iteration-count”, which will define how many times the animation will play. This animation will repeat forever because it’s iteration count is set to infinite.

Textbreak

Using CSS, I can make it so that the text in this box will break to the next line if the words are too long. For an example of this, I will now say a lot of long words (sorry for all of my hypopotomonstrosesquepadiliaphobic readers). the photosynthesis of the bisector convolutes indirectly with the pneumonoultramicroscopicsilicovolcanoconiosis, which is connected to antidisestablishmentarianism, but is exceedingly limited in the terms of floccinaucinihilipilification.

Transitions

Transitions are similar to animations, except that they don’t take in a keyframes. Instead, by using the same id and specifying that the transition will play on over using :hover, the transition will happen over a period of 4 seconds, and will change the height from 600px. This is because the transition attribute has two parameters; what is changing about the element and how long it’s changing for. Since we have a separate height for when you hover over it, as “height” is set to 600px, which is different from the original non-hovering 300px, it will be forced to change it’s height (which was specified to be changed due to the specification of the height attribute changing during the transition), over a span of 4 seconds (which was specified from the other attribute that defines the time that the transition will take place over).

Image Styling

This image uses image styling to make the corners of the image be rounded. This is affected by simply changing an image’s “border-radius”, in which I used a tag selector, because I wanted all of my images to have 12 pixel rounded borders.