.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; }
}
CSS
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/
Box gradient using CSS
.menu{
/* Safari 4-5, Chrome 1-9
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#43aedb));*/
/* Safari 5.1, Chrome 10+
background: -webkit-linear-gradient(top, #43aedb, #1a82f7);*/
/* Firefox 3.6+
background: -moz-linear-gradient(top, #43aedb, #1a82f7);*/
/* IE 10
background: -ms-linear-gradient(top, #43aedb, #1a82f7);*/
/* Opera 11.10+
background: -webkit-linear-gradient(top, #E0E9ED, #43aedb); */
}