Css properties

Hover Effects

HTML Code:
Hover Over Me
CSS Code:
button:hover {
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}

CSS Fade-in Effect on Hover
button{
opacity:0.5;
}
button:hover{
opacity:1;
}
CSS Grow-in Effect on Hover
button:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

overriding all the Styles

HTML Code:

            Hello World!         

CSS Code:
p {
                background-color: yellow;
            }
            .className {
                background-color: blue !important;
            }
            #idName {
                background-color: green;
            }

Truncate Text With Ellipsis

HTML Code:

            Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.         

CSS Code:

.text {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 200px;
            }

Leave a comment

Your email address will not be published. Required fields are marked *