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?
jQuery to animate image from left to right - 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
Garage Door Style Menu Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo' betta. A garage door style menu is where an image (the "door") slides up to reveal something behind it. We'll do this in two ways, with CSS3, and with jQuery. Then we'll combine them into a progressive enhancement way to handle it. The jQuery Method Right out of the box, jQuery provides the animate function, which allows us to morph some CSS attributes over time. Thankfully, there is a plugin to help with this, the Background-Position Animation Plugin by Alexander Farkas. View Demo Download Files 1. We are going to need three different types of images here. Notice my guides. Second, we'll need to create the garage doors which we will call the "shutters". Lastly, we need a window which will act as the garage frame. 2. Here is the menu markup: The ID on the menu will give us all the specificity we need. 3. The menu background is applied to the UL itself. 4. if (!
- 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
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
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”.
Starry Night by CSS-Tricks Example Paragraph Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Thin Paragraph with Pull Quote Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Another Example Paragraph Find pitcher.
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
20 jQuery Plugins to Create Animating Image Effects jQuery can be very powerful and as you learn more about it you will be amazed what it is capable of doing. Today’s post is a collection of 20 jQuery plugins to create animating image effects on your site/blog. They could be very helpful to attract new visitors to stay on your page and reduce bounce rate or just for fun! Enjoy. 1. Photon : JS CSS 3D Lighting Engine Photon is a experimental JavaScript CSS 3D Lighting Engine. SourceDemo 2. Allows you to create numerous transition animation effects for webpage elements. SourceDemo 3. forkit.js : An animated GitHub ribbon An experimental animated ribbon which reveals a curtain of additional content. SourceDemo 4. Shiny Sparkle Progress bars with percentage label. Source + Demo 5. A handy JavaScript plugin for generating and animating nice & clean gauges. Source + Demo 6.: JZoopraxiscope A jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope. SourceDemo 7. SourceDemo 8. SourceDemo 9. SourceDemo SourceDemo
- 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
10 Cool jQuery Animation Tutorials Here’s our collection of what we think are the 10 best jQuery Animation Tutorials you may have NOT seen before. Some of these tutorials may seem very simple but the results are fantastic and can form the base for something truly awesome. Enjoy. Related Posts: 1. It’s a cartoon themed landscape with elements which slide out to reveal additional content. SourceDemo 2. Gaya Kessler features a beautiful animation effect of puffing smoke in this tutorial. SourceDemo 3. After learning this tutorial you can understand how you can make BBC Radio 1 Zoom Tabs like effect where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture. SourceDemo 4. This project was created by layering several empty divs over each other with transparent PNGs as background images. SourceDemo 5. On many websites you should see the images moving continuously and automatically. SourceDemo 6. SourceDemo 7. We will teach you how to do Animate image filling up by using jQuery.
- 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