Hello everybody, I want to share a little technique with you that I used at a school project this week, the CSS3 transition feature.

Check out demo

Tested in:

• Firefox 4 beta
• Safari 5
• Chrome 6 & 7

The good thing about this technique is that the text is invisible, but rendered until mouse-overed, so search engines will read it. Problematic about this is that you can’t overwrite the opacity of a parent element. That means that you can’t have fully visible text in a <p> tag for example. The child elements will have the same opacity.

Code snippets:

HTML file:

<div class="box">
    <img src="pics/sunny_day.jpg">
    	<div class="box_text">
        <h2>oh sunny day</h2>
        	<p>
           	Description text
            </p>
        </div>
	</div>

CSS file:

.box {
	float: left; /* free space for content on the right of the element */
	margin: 5px;
	height: 333px;
	width: 500px;
	border: 5px solid white;
}

.box_text {
	position: relative;
	top:-341px; /* a little dirty workaround for this case, can surely be done better */
	left: -5px; /* a little dirty workaround for this case, can surely be done better */
	height: 333px;
	width: 500px;
	padding: 5px; /* inner distance to content */
	font-size: 1.1em;
	background: white;
	overflow: hidden; /* If text to big, don't render, don't create scrollbar */
	opacity: 0; /* make invisible */
	-moz-transition: opacity 1s linear; /* Transition for Mozilla Firefox */
	-o-transition: opacity 1s linear; /* Transition for Opera */
	-webkit-transition: opacity s linear; /* Transition for Webkit (Chrome, Safari) */
}
.box_text:hover {
opacity: 1; /* how visible the object is going to become on hover, values like 0.3 or 0.75 are available */
.box_text:hover {	opacity: 1; /* how visible the object is going to become on hover, values like 0.3 or 0.75 are available */

If you try off this feature, please show your results or ask if there is something you want to know Thanks for reading!



(If you don’t see something like this after clicking the image, please update your browser)

As I’ve mentioned I want to learn more JavaScript. Today I’ve played around a little with some chapters of JavaScript lessons and CSS3. What you see above is generated without any graphics. Just with JavaScript and CSS3. The gradient feature in CSS3 is really a charm. If you don’t want to get a headache over coding the gradients yourself, there are some generators for it around, like http://gradients.glrzad.com/.

See the JavaScript Demo here (or click the image).

Code for Clock:

<script type="text/javascript">
function clock(){
var now =  new Date();
var hour = now.getHours();
var minutes = now.getMinutes();
minutes = (minutes <; 10 ? "0" : "") + minutes;
hour = (hour <; 10 ? "0" : "") + hour;
var time = hour + ':' + minutes;
document.getElementById('block').innerHTML = time;
setTimeout('clock()','1000');
}
clock();
</script>

Code for background gradient (both for Webkit and Mozilla):

background: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.5, rgb(0,0,0)),
 color-stop(0.98, rgb(77,77,77))
);
background: -moz-linear-gradient(
 center bottom,
 rgb(0,0,0) 50%,
 rgb(77,77,77) 98%
);
}

Code for rounded corners:

border-top-left-radius: 50px 80px;
border-top-right-radius: 50px 80px;
border-bottom-left-radius: 50px 80px;
border-bottom-right-radius: 50px 80px;

The full source code, as always, is available through CTRL+U ;)

Webentwicklung ist ein weites Feld, aber CSS (Cascading Style Sheets) ist seit etlichen Jahren praktisch nicht daraus zu entfernen. Ein gut unterstützter Standard, um deren richtige Interpretation sich zwar Microsoft und der Rest der Browserwelt etwas gestritten haben, aber mittlerweile ist auch dieser Browserkrieg vorbei und CSS geht in die nächste Runde. Mit CSS3 werden Neuheiten implementiert und Hacks überflüssig, die den Quelltext einer Seite nur aufbliesen und dadurch auch anfälliger für Fehler machten. Besonders für den Internet Explorer gab es öfter mal Extrawürste in Form von Browserweichen. In diesem Beitrag möchte ich die schönsten Beispiele von CSS3-Code vorstellen, auf die ich durch webmasterpro.de aufmerksam geworden bin. Sämtliche Projekte sind beim Smashing Magazine einzusehen und die Quelltexte sind in den meisten Fällen herunter zu laden.

CSS3 Diagramme

Eine erstaunliche Lösung von Diagrammen, ohne Grafiken oder JavaScript lässt sich in dem Experiment von Sean Oh bewundern. Die netten Animationen, bei einem Wechsel der Datensätze und die hübsche Aufmachung machen eigentlich direkt Lust diese Technik einzusetzen. Ein Balkendiagramm gibt es auch noch hier mit sehr gut dokumentiertem Quelltext: CSS bar charts.

Ein- und Ausblenden

Ein weiterer, in meinen Augen praktischer und zudem gut aussehender Effekt ist das Ein- und Ausblenden von Elementen. In den Beispielen des CSS Jewelcase und eines virtuellen DVD-Regales (Vicero)

Animation

Hinter der CSS Transition Demo verbirgt sich etwas, das man normalerweise direkt für JavaScript oder Flash halten würde. Auf der Demoseite kann zwischen verschiedenen Effekten gewählt und gestaunt werden. Ein vollständiges Layout mit flüssiger Animation gibt es außerdem hier.

Weitere Informatione:n

• komplette Liste der Einsendungen des Smashing Magazine
• CSS3 Selector Test, eigenen Browser auf CSS3 Kompatibilität testen
• Acid 3 Test
• Browser die CSS3 weit beherrschen: Google Chrome / Chromium und Safari