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; }
}

Advertisement

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.

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

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

}