Disabled labels and the Trilemma plugin (Ask the CSS Guy) I’m working on a form that makes use of the disabled attribute, and the default browser settings for disabled inputs don’t have as much contrast as what I’d like. To better distinguish at a glance which inputs are disabled/enabled, I’ve chosen to style the labels of disabled inputs with a faint gray color. Consider the differences in the screenshot below. Regular labels vs labels with a disabled class You may also view a live HTML example of the above form to see how disabled fields appear in your browser. The difference in HTML is a small one. <input type="checkbox" id="astronomy1" disabled="true" /><label for="astronomy1">Astronomy</label> While the second example, I’ve added class="disabled" to the label: <input type="checkbox" id="astronomy2" disabled="true" /><label for="astronomy2" class="disabled">Astronomy</label> I’ve chosen to apply a light gray color to any label with a class of ‘disabled’. The Trilemma jQuery plugin How is this represented on an online request for proposal?
Sexy Opacity Animation with MooTools or jQuery A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique which you may implement in jQuery or MooTools. The XHTML <div id="forest-slot-1" class="opacity"><h2>The Forest</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ipsum at est condimentum sed ultricies turpis pellentesque. There's nothing too special about the HTML above; the awesomeness comes with CSS. The CSS To enhance the design of my content block, I'm adding a colorful background image behind where the content blocks will display. The MooTools JavaScript The structure for both the jQuery version and MooTools version is the same. The jQuery JavaScript Bring the sexy back with jQuery or MooTools and element opacity animation! Be Heard Tip: Wrap your code in <pre> tags or link to a GitHub Gist! Older Newer
- CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-Style CSS-Transitions - Fliessend animierte Übergänge wie Slide-Effekte bei Webseiten-Elementen wie bspw. einem Menü zu erzeugen, wurde bisher meisten von kleinen Plugins basierend auf einem JavaScript-Framework wie jQuery umgesetzt. Die CSS3-Eigenschaft Transition ermöglicht ein solches "Bewegungsmuster", ebenso wie die hier kürzlich vorgestellte CSS3-Eigenschaft Animation, nur ohne JavaScript. Das heißt, das bspw. "Slide-Effekte" ausschließlich via CSS umgesetzt werden können. CSS3 Transition Menu - Step 1: Definieren der HTML-Struktur Das HTML-Grundgerüst dieses Accordion-Menüs behinhaltet drei fiktive Menüpunkte ( Brand, Promotion, Event ) verwendet, die interessierten CSS-Anwendern vielleicht bereits aus den vorhergehenden CSS3-Tutorials bekannt sind. CSS3 Transition ... Die daraus resultierende Abbildung sieht, ohne CSS, noch relativ unspektakulär aus. Abb. 1: CSS3 Tutorial - HTML-Struktur des Accordion-Menüs CSS3 Transition Menu - Step 2: Anlegen der Hintergrundfarbe der Navigation Fazit
Create a Stunning Sliding Door Effect with jQuery Introduction Continue from our previous thumbnail effect series. This is the third one. If you missed the previous two, you can visit the following links: Advertisement This tutorial is going to be awesome! Basically, this is what it does: Grab all the div with qitem class, find the image and replace it with four DIVs (four corners)Each of the corner will have the same background image (grabbed from qitem class's child image element) but with different background position: top left, top right, bottom left and bottom right. The following image illustrate how it works: It's a good practise to keep HTML as simple as possible. In the demo, we can see there are total of 9 items. <div class="qitem"><a href=" src="1.gif" alt="Test 1" title="" width="126" height="126"/></a><span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In CSS section, it's quite simple. For caption, position:absolute is a must to se the z-index. 3.
- Creative Image-Galleries by jQuery JavaScript - 16 Jul, 2009 Die Phase in der sich Besucher von Webseiten entscheiden, auch nach der ersten Wahrnehmung der Webseite weiterhin auf dieser zu verweilen oder bspw. den Kauf eines Produktes erwägt, spielt die Emotion die beim Besucher geweckt wird den entscheidenden Faktor. Daraus resultierende Fragen beziehen sich dann darauf, ob diese Seite dem Besucher einen Mehrwert bietet. Das könnten gesuchte Informationen oder aber eben auch Produkte sein, die er oder sie möglicherwiese bereit sind zu kaufen. Um nun diese Emotionen zu wecken, gibt es in der Online-Welt des WWW kaum ein effektiveres Gestaltungselement als Bilder. Die Art und weise der Präsentation von Bildern und Bilder-Galerien kann auf verschiedenste Arten angegangen werden. FullScreen Image-Gallery SupersizedGallery ImageRotator Galleria Content-Gallery Galleriffic EasySlider ImageScroller Slider ImagesSwitch Eine weitere Anwendungsmöglichkeit zur Präsentation von Bildmaterial ist der Panaramo-Blick. PanoramaView
Item Blur Effect with CSS3 and jQuery Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of "focus" effect that drwas the attention to the currently hovered item. View demo Download source Today we want to show you how to create a simple blur effect for text-based items. We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since we will be using transitions, this effect will only work properly in browsers that support them. So let’s start! The Markup The structure will be a section with some articles in i. Let’s look at the style. The CSS The main container will be of fixed width and centered: Let’s clear the floats (out articles will be floating) with the help of the :before and :after pseudo elements: Now, let’s style the article items. For Webkit browsers we’ll also add -webkit-backface-visibility: hidden
Kwicks for jQuery and an awesome horizontal animated menu Menu of a web page is the most important and maybe the most clicked link on your web page. Do you want your menu look sexy with an awesome animation on your website? Follow me, I will walk you to the final result of using Kwicks – jQuery Plugin to build an horizontal menu with a nice effect like Mootools but more customizable and versatile. Always begin with the Demo and Download, huh? In the example above, the block width of menu item will be changed when the mouse goes over. HTML code: HTML code seem to be simple. CSS code: The CSS code below maybe a bit long, but I think it’s easy to read. Javascript Here is the list of javascript lib that we need to make the menu works And …. Copy & paste the hold thing below for the job done, but it’s just a little bit code I got. Read the Kwicks documentation for available options. One more thing If you’re gonna use this menu for wordpress and want to select the active menu. Â ............. Add the id attribute into the link with value: “active”.
Lateral On-Scroll Sliding with jQuery After getting the request, we are going to show you how to create a "slide-in on scroll" effect. You've probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. View demo Download source After getting the request, we are going to show you how to create a “slide-in on scroll” effect. The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. So, let’s start! The Markup The HTML structure is going to consist of a main container and some rows that we’ll use to place the left and the right elements. For the circles we’ll have three different sizes and we’ll indicate that but giving the respective row the class of “ss-small”, “ss-medium” or “ss-large”. The CSS The row will serve as a wrapper for the left and right elements: The JavaScript Demos
Create fancy share box with CSS and jQuery This tutorial will show you how to turn unordered list (UL) into an fancy social bookmarking sharing box. You will see how to style such box, how to add interactivity, and how to create jQuery plugin that will turn any UL into sharing box. Download source View demo The idea is to have all of the buttons shown inline and partially hidden. When user hovers over a button it slides to the right and become visible. Styling unordered list We will use unordered list to create a simple list that will show icons of popular social bookmarking sites. We’ll leave HTML anchors empty here so you have to replace them with real links. Now the list looks fine, but this is not what we wanted to do. To carry out what we wanted from the beginning, we need to involve absolute inside relative positioning. Adding jQuery Image above shows how buttons will appear when we make them absolutely positioned. The code above iterates through collection of list items and applies z-index to each list item. Creating plugin
Typography Effects with CSS3 and jQuery Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilites. View demo Download source Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites. We’ll be using Lettering.js in order to style single letters of the words we’ll be having in our big headlines. The image used in the demo is by Andrey & Lili. The HTML The structure will simply be an h2 element with an anchor inside. Then we’ll call the Lettering.js plugin, so that every letter gets wrapped in a span. Now, let’s take a look at each example. In order not to bloat the tutorial, I will not be showing any CSS vendor prefixes. Example 1 In the first example we want to skew the letters in order to create bit of perspective. Example 2 Example 3
- Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 1 Windows 7 Fenster mit CSS3 & jQuery - Du findest das Interfacedesign von Windows 7 ansehnlich und interessierst dich für CSS3? Dann bist du hier genau richtig. Denn im weiteren Verlauf wird in diesem Tutorial-2-Teilers ein Fenster aus Windows 7 mit Hilfe von CSS3 und jQuery UI erstellt. Windows 7 Fenster - Das Original als Vorlage Windows 7 - Das Original als Vorlage Damit ihr wisst, was nachgebaut werden wird, hier ein Abbildung eines Fensters aus Windows 7. Fensterrahmen: Transparenz, runde Ecken, SchlagschattenFenstertitel: Programm-Icon, Text-Shadow, Schriftart: Segoe UIFensterinhalt: flexible Höhe und Breite Damit aber nicht genug, wenn ihr das Bild wie die Abbildung hier links etwas vergrößert, seht ihr, dass noch ein paar kleine Details in der Auflistung fehlen. Step 1 - Anlegen des HTML-Gerüstes und der Inhalte Code-Beispiel <! Zur Erläuterung: Ein Doctype sollte vorhanden sein, welchen ihr benutzt, ist aber selbstverständlich euch überlassen. Windows 7 - Transparentes Fenster
Building an Animated Cartoon Robot with jQuery Why? Aside from being a fun exercise, what purpose does something like this have? None that's plainly obvious. View Demo Overview This project was created by layering several empty divs over each other with transparent PNGs as background images. The backgrounds were animated at different speeds using a jQuery plug-in by Alexander Farkas. The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces. The Markup <div id="wrapper"><div id="cloud-01"><div id="cloud-02"><div id="mountains-03"><div id="ground"><div id="full-robot"><div id="branding"><h1>Robot Head. The structure of the divs closely resembles our diagram. The Style The CSS for this project is just as simple as the markup. Absolute positioning is used to pull any header or paragraph text 9999px to the left of the screen. The jQuery JavaScript Disclaimer: The original script to animate the robot was horrid. Note from Chris Share On
- CSS3 Tutorial - Website-Navigation - Border-Radius CSS3-Tutorial - Inspiriert von dem hier im Webstandard-Blog kürzlich vorgestellten CSS-Tutorial "The hidden power of border-radius" und der vielerorts ausgetragenen Diskussionen zum Thema Progressive Enhancement im Bereich Webdesign bezüglich vorhandener Webstandards, ist das folgende kleine aber hoffentlich für den ein oder anderen Leser inspirierende CSS3-Tutorial mit Hauptaugenmerk auf der CSS3 Eigenschaft Border-Radius und den damit durchaus vorhandenen Gestaltungsmöglichkeiten entstanden. Keine Tricks, keine Zauberei und vor allem keinerlei Grafiken (!), lediglich ein paar übersichtliche Zeilen CSS. CSS3 Tutorial - Step 1: Definieren der HTML-Struktur der Navigation Das HTML-Grundgerüst einer Navigation ist, der Bedeutung der Inhalte entsprechend, im Idealfall ein Liste. Code-Beispiel ... Abb. 1: HTML-Struktur der Navigation ohne CSS CSS3 Tutorial - Step 2: Anlegen der Hintergrundfarbe der Navigation Abb. 2: Anlegen der Hintergrundfarbe der Navigation View Tutorial Demo