Shuss Media Header
How to create different shapes in CSS
Shapes are very important in web developement/design world as we can create so many things with them and actually have more fun, too.
Triangles
Triangles are made up of 0 width and 0 height of a box. The actual width and height of the arrow are determined by the size of the border. For an example, in the up side up triangle, the bottom border is colored while the left and right are transparent.
Arrow-up
  1. div.arrow-up {
  2. width: 0;
  3. height: 0;
  4. border-left: 20px solid transparent; /* slant left arrow */
  5. border-right: 20px solid transparent;/* slant right arrow */
  6. border-bottom: 20px solid green; /* bottom, add background color */
  7. }
Arrow-down
  1. div.arrow-down {
  2. width: 0;
  3. height: 0;
  4. border-left: 20px solid transparent; /* slant left arrow */
  5. border-right: 20px solid transparent; /* slant right arrow */
  6. border-top: 20px solid #000; /* top, add background color */
  7. }
Arrow-right
  1. div.arrow-right {
  2. width: 0;
  3. height: 0;
  4. border-top: 20px solid transparent; /* slant top arrow */
  5. border-bottom: 20px solid transparent; /* slant bottom arrow */
  6. border-left: 20px solid red; /* left, add background color */
  7. }
Arrow-left
  1. div.arrow-left {
  2. width: 0;
  3. height: 0;
  4. border-top: 20px solid transparent; /* slant top arrow */
  5. border-bottom: 20px solid transparent; /* slant bottom arrow */
  6. border-right: 20px solid blue; /* right, add background color */
  7. }
Squares
  1. div.square {
  2. width:50px;
  3. height:50px;
  4. border:1px solid #000;
  5. background:green;
  6. }
Rectangles
  1. div.rectangle {
  2. width:100px;
  3. height:50px;
  4. border:1px solid #000;
  5. background:red;
  6. }
Parallelogram or Parallelogram-left
  1. div.parallelogram {
  2. width:70px;
  3. height:70px;
  4. border:1px solid #000;
  5. background:green;
  6. transform:skew(40deg);
  7. -o-transform:skew(40deg);
  8. -moz-transform:skew(40deg);
  9. -webkit-transform:skew(40deg);
  10. }
Parallelogram-right
  1. div.parallelogram-right {
  2. width:70px;
  3. height:70px;
  4. border:1px solid #000;
  5. background:red;
  6. transform:skew(-40deg);
  7. -o-transform:skew(-40deg);
  8. -moz-transform:skew(-40deg);
  9. -webkit-transform:skew(-40deg);
  10. }
Circle
  1. div.circle {
  2. width: 50px;
  3. height: 50px;
  4. background: yellow;
  5. border-radius: 50px;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. -ms-border-radius: 50px;
  9. -o-border-radius: 50px;
  10. }
Text inside a Circle
2
  1. span.innerTEXT {
  2. position: absolute;
  3. top:16px;
  4. left:20px;
  5. z-index: 200;
  6. font-size: 18px;
  7. font-weight: bold;
  8. color: green;
  9. }
Half Circle
  1. div.halfCircle {
  2. width: 90px;
  3. height: 45px;
  4. background: green;
  5. border-radius: 90px 90px 0 0;
  6. -moz-border-radius: 90px 90px 0 0;
  7. -webkit-border-radius: 90px 90px 0 0;
  8. -ms-border-radius: 90px 90px 0 0;
  9. -o-border-radius: 90px 90px 0 0;
  10. }
Book Mark Ribbon

    How to make a Book Mark Ribbon

  1. <pageOfRibbon> for a page.
  2. <ribbonOne>for the ribbon.
  1. div.pageOfRibbon {
  2. display: inline-block;
  3. font-family: monospace, serif monospace;
  4. font-size: 1em;
  5. width:45%;
  6. height:45%;
  7. vertical-align:middle;
  8. position:relative;
  9. }
  1. div.ribbonOne{
  2. width:0;
  3. height:20px;
  4. border-right:10px solid #F24F51;
  5. border-left:10px solid #F24F51;
  6. border-bottom:10px solid transparent;
  7. position:absolute;
  8. top:0%;
  9. right:2%;
  10. }
  1. .ribbonExplanation{
  2. clear:both;
  3. float:left;
  4. counter-reset:li;
  5. margin-bottom:30px;
  6. text-align:center;
  7. background:#CCC;
  8. padding:30px;
  9. font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  10. font-weight:bold;
  11. font-size:12px;
  12. border:1px solid #ccc;
  13. }
  1. .ribbonExplanation >li{
  2. position:relative;
  3. margin:0;
  4. padding:8px
  5. list-style:none;
  6. background:#F2F2F2;
  7. text-align:left;
  8. }
  1. .ribbonExplanation > li:before{
  2. content:counter(li);
  3. counter-increment:li;
  4. position:absolute;
  5. top:0;
  6. left:-1em;
  7. with:2em;
  8. padding:8px 4px;
  9. color: #FFF;
  10. background:#f89d96;
  11. }
  1. .ribbonExplanation li:nth-of-type(even){
  2. background:#F2F2F2;
  3. font-weight: normal;
  4. }
  1. .ribbonExplanation li:nth-of-type(odd){
  2. font-weight: normal;
  3. background:#FFF;
  4. }
  1. .ribbonExplanation li span{
  2. font-style:italic;
  3. font-family:'Times New Roman', Times, serif;
  4. font-weight:bold;
  5. }
Homemade Coupons 15% Off Present this coupon at check out to receive 15% off your order!
  1. .coupon {
  2. font-family: monospace, serif monospace;
  3. margin:0 0 20px 30px;
  4. width: 15.625em;
  5. background: #FF9;
  6. padding: 10px;
  7. text-align: center;
  8. border: 3px dashed #ccc;
  9. outline: 10px solid #FF9;
  10. }
  1. .coupon span{
  2. display:block;
  3. }

Blockquotes

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

  1. blockquote {
  2. display:block;
  3. background: #FFF;
  4. position: relative;
  5. width:95%;
  6. font-family: monospace, serif; font-size: 1em;
  7. color: #424242;
  8. text-align: justify;
  9. -moz-box-shadow: 0px 0px 5px #000;
  10. -webkit-box-shadow: 0px 0px 5px #000;
  11. box-shadow: 0px 0px 5px #000;
  12. }
  1. blockquote p{
  2. padding:10px 25px;
  3. margin:10px 0 20px;
  4. border-left: 10px solid #d16418;
  5. border-right: 2px solid #d16418;
  6. }
  1. blockquote p::before {
  2. content: "\201C";
  3. font-family: monospace, serif; font-size: 1em;
  4. font-weight: bold;
  5. color: #999;
  6. position: absolute;
  7. left:2%;
  8. top:3%;
  9. }
  1. blockquote p::after{
  2. content: "\201D";
  3. font-family: monospace, serif; font-size: 1em;
  4. font-weight: bold;
  5. color: #999;
  6. position: absolute;
  7. right:33%;
  8. bottom:12%;
  9. }
Postage Stamp

49¢

ShussMedia

Oklahoma

Cherokee Teepee

  1. div.stamp {
  2. width:9.375em;
  3. height:9.375em;
  4. position:relative;
  5. border:1px solid #CCC;
  6. }
  1. div.stamp img.photo {
  2. width:100%;
  3. height:100%;
  4. outline: 5px dashed #000;
  5. }
  1. div.stamp p {
  2. font-size:12px;
  3. font-weight:bolder;
  4. position:absolute;
  5. width:100%;
  6. height:100%;
  7. z-index:1000;
  8. }
  1. div.stamp p.cent{
  2. top:0;
  3. left:70%;
  4. color:#000;
  5. font: bold 20px Georgia, "Times New Roman", Times, serif;
  6. }
  1. div.stamp p.shussMedia{
  2. font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  3. color:#3B170B;
  4. margin-top:-13%;
  5. width:100%;
  6. text-align:center;
  7. }
  1. div.stamp p.oklahoma{
  2. font-size:12px;
  3. font-weight:bolder;
  4. color:#F00;
  5. right:-2%;
  6. top:40%;
  7. transform: rotate(-270deg);
  8. -webkit-transform: rotate(-270deg);
  9. -moz-transform: rotate(-270deg);
  10. -ms-transform: rotate(-270deg);
  11. -o-transform: rotate(-270deg);
  12. }
  1. div.stamp p.cherokeeTeepee{
  2. font-size:12px;
  3. font-weight:bolder;
  4. left:-2%;
  5. bottom:10%;
  6. width:100%;
  7. color:#39F;
  8. transform: rotate(270deg);
  9. -webkit-transform: rotate(270deg);
  10. -moz-transform: rotate(270deg);
  11. -ms-transform: rotate(270deg);
  12. -o-transform: rotate(270deg);
  13. }
Light, Dark and Lighter search boxes

Different styles of search boxes with placeholder. On focus, for rounded search boxes, the placeholder fonts will turn cyan and bold; border will have blue color. For rectangular search borders, borders will have blue color. The search font will have whatever color and size we set.

Light
Dark
Lighter