/ / / / / Styling using CSS pseudo-element

Styling using CSS pseudo-element

Banner iklan disini
In the previous post, we also never talked about CSS pseudo-element, but only limited to "styling an ordered and unordered list". In addition, we may never see the form of text or image elements in the form of ribbons (ribbon), then the line (border) which has a sinking effect (press), folded shape in the corner of an element & mirror text effect (mirror effect on the text). All can be done also by using the CSS pseudo-elements: before and / or: after.
Credit

To use a border ribbon & air-sink effects you can read more on the blog Rudy Azhar. And one plus the value-added comments on the form by which the coding Ardianzzz-thus interesting to use the CSS pseudo-elements (demo ribbon).

Meanwhile, to create a mirror effect on the text, the author forgets (neglects) to link credit. Please contact the author if you claim that writing about the "mirror effect on the text" is taken from your source & author will soon do an update on the credit link.


.element {
background:#e1e1e1;
margin-left:.5em;
padding:1.5em 2em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
border-radius:1em
}
.element h2 {
background:#f90;
border-bottom:1px solid #666;
/*-- Rounded corner kiri atas --*/
-moz-border-radius:.25em 0 0 0;
-webkit-border-radius:.25em 0 0 0;
border-radius:.25em 0 0 0;
display:block;
left:-1.75em;
padding:.25em 0 .25em 1.75em;
position:relative;
width:60%
}
/* Mulai membentuk ribbon */
.element h2:after, .element h2:before {
content:" ";
display:block;
position:absolute
}
/* Ribbon kanan */
.element h2:after {
top:0;
right:0;
border-top:.85em solid #f90;
border-right:.75em solid #e1e1e1;
border-bottom:.85em solid #f90;
border-left:.75em solid #f90
}
/* Ribbon kiri */
.element h2:before {
bottom:-.25em;
left:0;
border-top:none;
border-right:none;
border-bottom:.25em solid #666;
border-left:.25em solid #666;
/*-- Rounded corner kiri bawah --*/
-moz-border-radius:0 0 0 .25em;
-webkit-border-radius:0 0 0 .25em;
border-radius:0 0 0 .25empx;
z-index:-1
}
 kode HTML .
<div class="ribbon">
<h2>Ribbon</h2> <p>In this element you see the sub heading "Ribbon" in a ribbon (ribbon). 
 The CSS is used as shown below…</p>
</div>
 
 
Border / line press effect
Under the sub heading "Border / line press effect", 
you see a border that looks like a button. To create a border, 
we can use the following CSS code. 


.element2 h2 {
padding:0 0 0.25em;
position:relative;
width:100%
}
.element2 h2:after {
content:" ";
position:absolute;
bottom:0;
left:0;
border-top: 1px solid #c3c3c3; /* Warna seharusnya lebih tua dari background */

border-bottom: 1px solid #f1f1f1; /* Warna seharusnya lebih muda dari background */
width:100%
}


Note:

     * Attribute width (blue) must not be 100%. This means that if the width is worth 80% of the left is worth 10% (where the line in the middle of the element).
     * If you want to add borders press on h2, add # element2 h2: before with the same property. Then replace the red code (bottom: 0;) with top: 0;.
     * In other cases, we may want to put a border on the right or left of the element.
           o Left elements:
 
top:0;
left:0;
border-left:1px solid #c3c3c3;
border-right:1px solid #f1f1f1;
height:100%;
 
Rigt elemen 

top:0;
right:0;
border-left:1px solid #c3c3c3;
border-right:1px solid #f1f1f1;
height:100%;
 
While the HTML code on this element is as follows.
 
.element4 h2 {
font-size:2em;
font-weight:bold;
position: relative
}
.element4 h2:before, .element4 h2:after {
display:block;
position:absolute;
bottom:-0.75em; /* You should change this value to fit your font */
left:0;
right:0
}
.element4 h2:before {
content: "Mirror Text";
opacity:.4;
/* This is how the text is flipped vertically */
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1)
}
.element4 h2:after {
/* Fading using CSS gradient */
/* Don't forget to change the colors to your background color */
background: -webkit-gradient(linear, left top, left center, from(rgba(238,238,238,0)), to(rgba(238,238,238,1)));
background: -moz-linear-gradient(top, rgba(238,238,238,0), rgba(238,238,238,1));
/* I left out the `filter` property,
because IE doesn't know `:before` and `:after` pseudo-elements anyway */

content: " ";
height:0.75em
} 

Related Posts

Styling using CSS pseudo-element
4/ 5
Oleh