THE CSS EVENING NEWS

HTML & CSS:



<div class="sunset">
	<span class="sunsettext">THE CSS EVENING NEWS</span>
</div>

.sunset {
	width: 100%;
	position: relative;
	display: inline-block;
	padding: 30px 0 30px 0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	text-align: center;
	background-image: -webkit-linear-gradient(#a05020, #dd6930);
	background-image: -moz-linear-gradient(#a05020, #dd6930);
	background-image: -o-linear-gradient(#a05020, #dd6930);
	background-image: linear-gradient(#a05020, #dd6930);
}
.sunset:after {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	content: " ";
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background-image: -webkit-radial-gradient(550px 600px, circle, #fed03d, #fc7e29 60%, #f66c2d 65%, rgba(250,96,48,0) 70%);
	background-image: -moz-radial-gradient(550px 600px, circle, #fed03d, #fc7e29 60%, #f66c2d 65%, rgba(250,96,48,0) 70%);
	background-image: -o-radial-gradient(550px 600px, circle, #fed03d, #fc7e29 60%, #f66c2d 65%, rgba(250,96,48,0) 70%);
	background-image: radial-gradient(550px 600px, circle, #fed03d, #fc7e29 60%, #f66c2d 65%, rgba(250,96,48,0) 70%);
}
.sunsettext {
	font-size: 48px;
	font-weight: bold;
	color: rgba(0,0,0,0);
	text-shadow: #ccaa00 0px 0px 4px, #ffffaa 0px 0px 1px;
}
						

<div class="sunset">

This is the main container for our sunset-drenched headline. The position and display values are necessary to allow for a full-cover :after pseudo element, and the div also has round corners and a simple linear top-to-bottom gradient.

.sunset:after Pseudo Element

This CSS instruction forces the browser to insert an extra element into the page after any div with the class "sunset". You can imagine this new element to be a completely unstyled div that is not part of the DOM and can thereofore not be addressed via JavaScript. We give this new element position: absolute and since .sunset is set to position:relative, the new element will overlap our sunset div. This new element has the same round corners as the sunset div and also contains a gradient, but this gradient is radial and ends in a transparent color that will blend in with the linear gradient under it.

<span class="sunsettext">

We are using a little trick to add structure to the letters of the headline: The actual text is transparent and we only show two text shadows with slightly different colors and blur values, which creates that shimmery golden effect on the letters.

Discussion

Name *:        Email *:        URL:
SUBMIT
no comments yet...