Archive for the ‘CSS 3’ Category

Vertical align in divs

Posted: April 12, 2016 in CSS 3

HTML :

      <div class="vcenter">
           <div class="col-md-4">1</div>
           <div class="col-md-4">2</div>
           <div class="col-md-4">3</div>
      </div>

CSS :

.vcenter {
    align-items: center;
    display: flex;
}
Advertisements

CSS3 triangle shape with link

Posted: November 27, 2015 in CSS 3

HTML

<div class="actions">
	<a href="#" class="button btn-cart">
		<img src="images/demo.png">
	</button>
	<a href="#" class="product-detail">
		<img src="images/demo.png">
	</a>
</div>

CSS

.actions {
    bottom: 0;
    height: 73px;
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 74px;
}
.actions .button.btn-cart img, 
.actions .product-detail img, 
{
    height: 100%;
    transform-origin: inherit;
    width: 100%;
}
.actions .button.btn-cart {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: skewX(1.02deg);
    transform-origin: 50% 0 0;
}
.actions .product-detail {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: skewY(141.02deg);
    transform-origin: 100% 0 0;
}
.actions .product-detail img {
    transform: skewY(38.02deg);
}

Like below :
Capture

Drop Shadow in IE7 & IE8

Posted: April 25, 2013 in CSS 3

.shadow { width:100px; height:100px; background:#fff;
-moz-box-shadow: 3px 3px 4px red;
-webkit-box-shadow: 3px 3px 4px red;
box-shadow: 3px 3px 4px red;
/* For IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’red’)”;
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’red’);

}

Button With Line Breaks

Posted: March 26, 2013 in CSS 3

<input type="button" value="Really#x00A;
Tall#x00A; Button">

Media Screen CSS

Posted: March 11, 2013 in CSS 3

/* #Media Queries
================================================== */

@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 801px) {
}

@media only screen and (max-width: 481px) {
}

@media only screen and (max-width: 321px) {
}

Clear Fix

Posted: February 8, 2013 in CSS 3

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

{clear: both;}
clearfix

————————————————————————————————————————————————–
Once you understand what is happening, use the method below to “clearfix” it.

.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

CSS Tricks

Posted: November 27, 2012 in CSS 3

Break URL :

word-wrap: break-word;

=============================================================================================

Hidden Scroll in textarea for IE :

textarea {overflow:auto;}

=============================================================================================

Image Hover Effect :
:hover {
transform: rotate(0deg) scale(2);
transition-duration: 1000ms;
transition-timing-function: ease-out;
}

=============================================================================================
Selected Nav without apply active class

ul.primary li.active > a { background: #444; }