Useful CSS properties for custom styling

1. CSS text-overflow Property

This css code will wrap heading in a single line. Its reduce height of blog or any post title when its used in grid and improve layout.

div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

2. CSS on hover zoom from center

.n_box h4 a{
transition-duration: 0.3s;
transform-origin: 50% 50%;
transform: scale(0) translate(0,0);}

.n_box:hover a{
transform: scale(1) translate(0,0);
opacity: 1;}

3. CSS on hover toward center

.n_box h4 a{
transition-duration: 0.3s;
transform-origin: 50% 50%;
transform: scale(1) translate(0,0);}

.n_box:hover a{
transform: scale(1) translate(0,0);
opacity: 0.1;}

4. Fix Post title in two row

h4.blog-head{
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-bottom: 0px ;
    margin-bottom: 15px;
}

Note: n_box is main div class h4 and anchor tag is under n_box sec..

5. Uses of transform css

This css used for rotate specific div or element.

class_name{
position: absolute;
padding: 20px;
transition: ro;
background: #342e73;
border-radius: 0;
-webkit-transform: rotate(13deg);
-o-transform: rotate(49deg);
transform: rotate(38deg);
border-left: 3px solid #3fdb6a;
right: -13px;
height: 60px;
top: 30px;
width: 190px;}

6. How to write gradient text color?

class_name{background-color: linear-gradient(to right, #ff394f 20%, #ffcf26);
  background-image: linear-gradient(to right, #ff664f 20%, #f9cf26);
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;}

7. CSS display flex

This css code define column as per width required. There is no responsive code after this code to break column in mobile or tablet..

.main_grid_container{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
grid-gap: 10px 15px;
}

8. Owl-carousel Java script code to run custom slider in html

$(‘.owl-carousel’).owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
})

Here is html tag

in main section add

id=”owl-demo” class=”owl-carousel owl-theme”

Example:

References:

Custom animation css

.Class_name
height: 400px;
width: 400px;
background-color: red;
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
border-radius: 100%;
}

@keyframes pulse {
0%, 100% {
background-color: red;
}
50% {
background-color: orange;
}
}

@keyframes nudge {
0%, 100% {
transform: translate(0, 0);
}

50% {
transform: translate(150px, 0);
}

80% {
transform: translate(-150px, 0);
}
}

Reference Links

https://css-tricks.com/almanac/properties/a/animation/