OWL carousel items overlapping

Posted by Avinash Konanki

.owl-carousel .animated {
-webkit-animation-duration: 20ms;
animation-duration: 20ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

Button flash using CSS3

Posted by Avinash Konanki


.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

Posted by Avinash Konanki

Marquee ul li inline issue in MAC safari

marquee{
display: inline-block;
white-space: nowrap;
position: absolute;
}
ul.list-items li{
display: inline-block;
}
ul.list-items{
display: inline-block;
}

Change scrollbar style using css

Posted by Avinash Konanki

/*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

Posted by Avinash Konanki

// 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

Posted by Avinash Konanki

Responsive table scrollbar not showing in mobile

Posted by Avinash Konanki

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