Problem Face CSS

|| scroll bar color:

:-webkit-scrollbar {
	width: 6px;
	padding: 0 5px;
	background: #1f1c1a;
}

::-webkit-scrollbar-thumb {
	background: #333290;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

|| image scroll:

{style="overflow-y:scroll;height:600px;}
or
<div class="scrollingDiv">foo</div> 

div.scrollingDiv{
   overflow:scroll;
}

|| Gradient Background:

background: -webkit-linear-gradient(0deg, #95D146 10%, #76af2b 90%); /* Chrome 10+, Saf5.1+ */
background:    -moz-linear-gradient(0deg, #95D146 10%, #76af2b 90%); /* FF3.6+ */
background:     -ms-linear-gradient(0deg, #95D146 10%, #76af2b 90%); /* IE10 */
background:      -o-linear-gradient(0deg, #95D146 10%, #76af2b 90%); /* Opera 11.10+ */
background:         linear-gradient(0deg, #95D146 10%, #76af2b 90%); /* W3C */

|| Gradiend Only border-right:

border-right-width:1px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, transparent), color-stop(0.5, grey), color-stop(0.5, grey), color-stop(1, transparent)) 0 100%;

|| Specify a background color for every

element that is the second child of its parent:

 td:nth-child(2) {
    background: #ff0000;
}

|| Exact Middle for all display:

.banner_bar {
  background: url("../images/ycd.png") no-repeat scroll 54% 0 rgba(0, 0, 0, 0);
  bottom: auto;
  left: 5%;
  padding: 36px 0 0;
  position: absolute;
  right: 5%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

|| WordPress Slider Free Version:

 
div.amazingslider-box-1 :nth-child(3) { 
   visibility: hidden;
}

|| font add in css file:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

|| letter spacing:

a {letter-spacing: 2px;}

|| word wrap:

p {word-wrap:break-word;}

|| When you will see that google chrome don’t show background images. You will see that have a this code.

-webkit-backface-visibility:hidden;
solve:-webkit-backface-visibility:visible;

|| left vertical menu:

#sidenav .sidebar_menu{display:none;}
#sidenav:hover > .sidebar_menu{display:block;}
.cms-home #sidenav .sidebar_menu{display:block !important;}

|| background properties:

.background-attachment: fixed;
.background-size:100% 100%;
.background-size:cover;

|| .background-image:url('../images/go.png');
	background-position:left;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;

|| for search:

-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
.input-text:focus{width:0px;}    

|| Inset box shadow:

.box-shadow: -15px 0 15px -15px inset;

|| CSS3 inset box-shadow on left and right sides only:

-moz-box-shadow:inset 5px 0 5px -5px #CCCCCC,inset -5px 0 5px -5px #CCCCCC;
-webkit-box-shadow:nset 5px 0 5px -5px #CCCCCC, inset -5px 0 5px -5px #CCCCCC;
box-shadow:inset 5px 0 5px -5px #CCCCCC,inset -5px 0 5px -5px #CCCCCC;

|| Only Bottom Shadow:

-webkit-box-shadow: 0 8px 6px -6px #CCCCCC;
-moz-box-shadow: 0 8px 6px -6px #CCCCCC;
box-shadow: 0 8px 6px -6px #CCCCCC;

|| box-shadow on Right and Bottom sides only:

-moz-box-shadow:4px 3px 8px 0 #CCCCCC;
-webkit-box-shadow:4px 3px 8px 0 #CCCCCC;
box-shadow:4px 3px 8px 0 #CCCCCC;
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s