Simply-Buttons v2 : p51 Labs. By Kevin » November 11th, 2009 » TESTED IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC) Background I had some time a while back and read a few interesting articles on buttons: These got me thinking… these techniques are pretty nice, but I think they can meet somewhere in the middle and make something even better, after all the button tag was created to make really nice buttons for your sites (W3 Button Element).
5 Column CSS Demo - Equal Height Columns with Cross-Browser CSS. Equal height columns It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.
Agentur für visuelle Kommunikation. Meine Spielwiese. Demo: Pure CSS folded-corner effect. Responsive Webdesign & CSS3 Media Queries. Pure CSS Slide-out Interface. Here’s a new technique I’m trying out: a slide-out interface element using just CSS, no JavaScript.
It can be used for things like fixed navigation bars or little feedback forms you see sometimes on the side of the page. Here’s how it works… Let’s do the feedback form as an example. See the demo right here. Supports IE8+ (and IE7 too if the container div is changed to an anchor) and every other modern browser. When you hover over it, a feedback form will slide out: CSS Triangle Breadcrumbs. CSS Stuff. A css only dropdown menu further examples. 24th May 2006 Menu #1 - 24th May 2006 This first example is a flexible width top level list that expands to fit the text.It has a fixed height and uses a background image that stretches the full width of the outer div, in this case 750px, and a background div in each top level link to mark the right hand edge of the link.
The top level hover varies the text color and the bottom border color.The sub level hover varies the background color and adds a background square bullet against the top line of each list item. Sub level drop down lists can be positioned anywhere (left/right) beneath the top level list. The sub levels are a fixed size, but can easily be changed to suit your requirements, and have a single pixel border. How to Create CSS3 Speech Bubbles Without Images. I remember my creating my first image-less speech bubble many years ago.
It required a long-winded JavaScript function to inject elements into the DOM, some horrendous CSS, looked fairly awful, and didn’t work well in IE5. CSS3 is starting to change our lives for the better. It’s now possible to create a great looking speech bubble which works in all browsers, uses a single HTML element, a few lines of CSS3 code, no images, and no JavaScript whatsoever… To ease you in gently, let’s examine the HTML.
30 Pure CSS Alternatives to Javascript. With all the cool things that surround Javascript (especially with jQuery) its easy to forget that it’s possible to push pure CSS (with a touch of HTML) into an all singing and all dancing interactive site, with absolutely no scripting at all.
The pure CSS techniques, outlined in this article, are neither new nor are they ground-breaking. What they do offer is CSS solutions to what would typically and traditionally be associated with Javascript, and as a demonstration that they do exist and could be quite easily used. Having said all that, we are in no way saying that these techniques are in anyway better than there Javascript equivalent, just an optional alternative and as a proof of concept. In this article we have concentrated on showing as many varied CSS techniques that cover the full spectrum of web site interactivity, thus we have intentionally minimized the number of pure CSS navigation methods, of which there are literally hundreds. 10 Pure CSS3 Image Galleries and Sliders. There are hundreds upon hundreds of Javscript based image gallery/slider plugins and techniques you could choose from, all offering something different, all of them offer a whole lot of interactivity and most are relatively easy to use and install.
So, the question is, why would you even consider a pure CSS alternative? Because CSS3 is AWESOME. Its moving at an amazing rate of knots, with new techniques and fresh ideas being published almost every day, pushing its own boundaries ever further, lessening our reliance on Javascript. Turn Your Images Into Polaroids with CSS3. Nicer Navigation with CSS Transitions - GetHiFi. Update: March 21, 2014 - We have an updated post after years of practice with these techniques.
Newer versions of Apple's Safari web browser (and Google Chrome, which is also based on Webkit) support a vendor-specific implementation of the CSS3 Transition property. A Pure CSS3 Cycling Slideshow. Quick summary ↬ Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.
Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers. But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. CSS3 Responsive Slider / Carousel Using Radio Buttons. Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_).
Icons from the iconSweets set. Pures CSS3: Ein schicker Content-Slider ganz ohne JavaScript. Vieles, was bisher nur mit Flash oder JavaScript möglich war, lässt sich mittlerweile mit purem CSS3 realisieren. 6 Pure CSS Content Slider Alternatives to JavaScript. jQuery content slider is perfect for any kind of website to display their featured works, articles or product, its really easy to use and creates beautiful slider effects without getting your hands dirty with code. There’re so many great tutorials out there teaching how to create a content sliders with jQuery. But before you decide to use jQuery content sliders, you also need to consider how many of your users are browsing your site with JavaScript disabled through analytics tools.
Usually, 1%-3% of your site visitors have javascript disabled, It seems like some low numbers? , keep in mind that small percentages of big numbers are also big numbers. So you know your risk before you decide to use jQuery content sliders on your website. CSS3 Drop Shadows Generator. CSS3 Flexbox Layout module. Die richtigen Farben fürs Flat-Design.
Colours. Responsive background images with fixed or fluid aspect ratios – Voormedia. What's the easiest way to scale background images in responsive layouts? We use an old technique and enhance it to fluidly change the aspect ratio of background images. Responsive layouts make it possible to dynamically scale the width of a website to fit on small mobile devices as well as larger desktop computers. An <img> element with a percentual width will have its height automatically adjusted.
Its aspect ratio remains the same when it is resized. ByPeople: A huge free bundle for web professionals, 500mb of free files in one single download. Simple Multi-Item Slider with CSS Animations and jQuery. CSS3 Patterns Gallery. Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation.
Submission guidelines If you have a new pattern to submit, please send a pull request. Paperfold CSS: Kommentare mit Akkordeon-Effekt. Little Boxes. Adobe - CS2-Download. 1. Textpassagen hervorheben. CSS3 text-shadow. Demo: Pure CSS speech bubbles. The basic bubble variants This only needs one HTML element. For example, <p>[text]</p>. But it could be any element you want. The entire appearance is created only with CSS. Simple examples Design is directed toward human beings. Ivan Chermayeff It’s not what you look at that matters, it’s what you see.
Paperfold CSS: Kommentare mit Akkordeon-Effekt. Navi – Tabs › KS webdesign - Ihr Webdesigner in Passau. Sehr beliebt sind auch Menüs, die sich mit Tabs organisieren. Vielleicht ist euch in diesem Zusammenhang schon mal der Begriff Sliding Doors (Schiebetürentechnik) untergekommen. Der Nachteil dieser Technik ist, das man pro Linkzustand jeweils zwei Grafiken braucht. Diese Hintergrundbilder waren so weit ineinander geschoben, das sie sich beim Zoomen der Seite wie eine Schiebetür immer weiter auseinanderzogen. Wir verwirklichen das Ganze mit CSS-Sprites (engl. für Kobolde, Geist), d.h. wir benötigen nur eine Grafik für alles.