We all know CSS is a simple language used to set visual style of web pages. It has simple syntax so it’s easy to understand. Once in a while, there comes a moment where CSS is tricky too. So in such situation, to get the job done easily, various CSS tricks and techniques will be very helpful. Here I have compiled a list of basic CSS tricks and techniques that might be helpful for very designers.
1)Hover effects and CSS transition
Hover effects allow you to change CSS properties when you hover over the certain elements and CSS transition is the way to control animation speed when changing CSS properties.For eg, if you want to change the background color of a button on hover, you will do this,
.button{
background: #eee;
}
.button:hover{
background: #000;
}
Here, if you hover button background color will change, but it will be instantaneous, not cool, not visually appealing.But you can apply transition through CSS which will look great.
.button{
transition: all 0.5s ease;
background: #eee;
}
.button:hover{
background: #000;
}
2)Vertically centering text with line height
It’s a great way to align your text vertically center if you know the height of the block where the text lies.You can use line-height properties for this.
.block{
height: 50px;
Line-height: 50px;
}
3)Fluid images
Responsive design is a must for every designer today. For text, they are fluid by default as they reflows to occupy the remaining space as browsers are narrow down.But Images are not fluid.But, you can use max width properties to make it fluid
img{
max-width: 100%;
height: auto;
}
4)nth-child() Selector
This is used to match every element that is the nth child, regardless of type, of its parent.For eg: if you want to apply CSS properties only to the 5th selector from a group of selector.
p:nth-child(5){
color: #333;
}
5)Overriding styles
It is used to override a particular CSS property of element which has already CSS property defined. But it must use cautiously.
For eg: already defined CSS
#block p{
color:#fff;
}
If you want to override this CSS just use !important at the end of CSS
#block p{
color:#fff !important;
}
6)Cross-Browser Transparency
All browser do not support transparency over the element. But you can use this technique to make it work.
.element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
7)Creating circles with border radius
Border radius is the CSS property which you can use to make circles.You just set the border-radius of each side of an element to 50% will create the circle display at any size.
.cirlce {
width: 200px;
height: 200px;
background-color: #000;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius: 50%;
}
8)Fixed element
Fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
.element{
Position: fixed;
}
9)Multiple Border
If you want multiple borders on a certain element You can position a pseudo element like this
Normal single border
.circle{
position: relative;
border: 2px solid #000;
}
Now use pseudo element like this
.circle:before {
content: " ";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 2px solid #000;
}
10)Gradient Text
You can add gradient color to the text while the text remains editable and selectable web text by doing this.
h2 {
font-size: 60px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
11)CSS triangles
You can make awesome triangles just with the CSS
.traingle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #007bff transparent;
}
12)Rotating element
The transform property is used to apply a 2D or 3D transformation to an element. This property allows you to rotate element in any direction.
.element {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
13)stack order of an element.
Z-index property is used to apply stack order of an element. An element with greater stack order will always be in front of one with lower stack order.
.box-large { position: relative; z-index: 1; height: 100px; width: 100px; background: #000; } .box-small { position: absolute; z-index: 3; /* Box small will be infront of box-large */ background: #fff; width: 50px; height: 50px; left: 10px; top: 10px; }
14)Blurry text
You can make a text blurry by doing this
.example {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
15)First child and last child
You can apply specific CSS property to a first element and last element in the container.
p:first-child{
color: #fff;
}
P:last-child{
color: #fff;
}
