Tina is Developer: CSS

Showing posts with label CSS. Show all posts

Saturday, July 18, 2015

Create arrow with CSS

Sometime you need create some shape by CSS3. I have some code to do it.

#base {
  background: red;
  display: inline-block;
  height: 30px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  line-height: 30px;
   padding: 0 10px;
}
#base:before {
  border-left: 15px solid red;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;  
  content: "";
  height: 0;
  left: 0;
  float:right;
  margin-right: -25px;
  width: 0;
}

CSS for Circle

#circle {
 width: 100px;
 height: 100px;
 background: red;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
}

Triangle Right

#triangle-right {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-left: 100px solid red;
 border-bottom: 50px solid transparent;
}

Sunday, July 14, 2013

Make Layout auto with css

Some time we need make layout with css with width is auto

Image

CSS
.main { width: 100%;clear: both }
.left { width: 250px; background-color: #ffebcd; float: left }
.right { margin-left: 250px; background-color: #8a2be2; }

.main2 { width: 100%; clear: both }
.left2 { background-color: #ffebcd;
width: webkit-calc(100% - 250px);
width: -o-calc(100% - 250px);
width: -moz-calc(100% - 250px);
width: calc(100% - 250px);
float: left;
}
.right2 { width: 250px; background-color: #8a2be2; float: right;}

HTML

<!DOCTYPE html>




 <html lang="en" class="no-js">
<head>

<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="main">
<div class="left">Test</div>
<div class="right">test</div>
</div>

<div class="main2">
<div class="left2">Test</div>
<div class="right2">test</div>
</div>

</body>
</html>

Wednesday, June 12, 2013

CSS - Bottom for element with DIV

If you want use vertical-align in CSS. You need change display for div or any element that you want.

This is code example

display: table-cell;
vertical-align: bottom;
height: 37px;
padding-bottom: 18px;

}

Good luck to you.