.owl-carousel .animated {
-webkit-animation-duration: 20ms;
animation-duration: 20ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
CSS
Button flash using CSS3
.flash-button{
background:#cc0000;
color:#fff;
border: 1px solid #cc0000;
border-radius: 6px;
animation-name: flash;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: flash;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: flash;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
@keyframes flash {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-webkit-keyframes flash {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-moz-keyframes flash {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
Marquee ul li inline issue in MAC safari
Change scrollbar style using css
/*CSS for scrollbar*/
::-webkit-scrollbar {
width: .3em;
height: 2em
}
::-webkit-scrollbar-button {
background: #ccc
}
::-webkit-scrollbar-track-piece {
background: #eee
}
::-webkit-scrollbar-thumb{
background: #888
}
But this CSS not supported in Mozilla browser.
Table styles using CSS
// Border for table with Padding
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
td, th{
padding: 6px;
}
CSS image zoom on hover inside a div
Responsive table scrollbar not showing in mobile
To show the scrollbar in responsive table put use below CSS code.
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
CSS responsive media queries are not applying
To apply responsive media queries in the website should add below meta tag
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
CSS Responsive media queries
Below provided CSS responsive media queries for mobile, tabs, desktops
/*Mobile view*/
@media (min-width : 320px) and (max-width : 480px) {
// related CSS
}
/*Tab view*/
@media (min-width : 480px) and (max-width : 760px) {
// related CSS
}
/*Tab view*/
@media (min-width : 760px) and (max-width : 980px) {
// related CSS
}
/*Desktop view*/
@media (min-width : 980px) and (max-width : 1024px) {
// related CSS
}
Font Awesome CSS & Icons
We can download Font Awesome CSS from using http://fortawesome.github.io/Font-Awesome/ .
Also we can download icons from using http://fortawesome.github.io/Font-Awesome/icons/