background preloader

CSS Inspirationen

Facebook Twitter

Simply-Buttons v2 : p51 Labs. By Kevin » November 11th, 2009 » TESTED IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC) Background.

Simply-Buttons v2 : p51 Labs

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. 5 Column Dimensions Each column is 20% percent wide with 2 percent padding on each side.

5 Column CSS Demo - Equal Height Columns with Cross-Browser CSS

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.

Pure CSS Slide-out Interface

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: The markup First, we’ll need the markup. 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.

A css only dropdown menu further examples

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.

How to Create CSS3 Speech Bubbles Without Images

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. A single element is required, so I’m using a P tag: 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.

30 Pure CSS Alternatives to Javascript

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. 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.

10 Pure CSS3 Image Galleries and Sliders

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. Nicer Navigation with CSS Transitions - GetHiFi. Update: March 21, 2014 - We have an updated post after years of practice with these techniques.

Nicer Navigation with CSS Transitions - GetHiFi

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. CSS Transitions are a very powerful effect that can eliminate the use of JavaScript for many common effects. A Pure CSS3 Cycling Slideshow. Advertisement Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.

A Pure CSS3 Cycling Slideshow

But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation. Sections of This Article To get a solid sense of the process from beginning to end, below is an outline of the article. Screenshot of the pure CSS3 cycling slideshow. 1. To follow this tutorial, having a basic understanding of CSS, especially CSS3 transitions and keyframe animation, is important. CSS3 Responsive Slider / Carousel Using Radio Buttons. Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_).

CSS3 Responsive Slider / Carousel Using Radio Buttons

Icons from the iconSweets set. Pures CSS3: Ein schicker Content-Slider ganz ohne JavaScript. 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. Alternatively, you can create a content slider using pure CSS, it means this will work with any web browser that has JavaScript disabled. 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. 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. Wave (294 B)✖by Paul Salentiny 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. Paperfold CSS: Kommentare mit Akkordeon-Effekt. Little Boxes. Adobe - CS2-Download. 1. Textpassagen hervorheben. CSS3 text-shadow. Das Ziel der CSS Eigenschaft für Textschatten ist es, Webdesigner und CSS-Programmierer ein Werkzeug in die Hand zu legen, mit dem Text-Effekte, ohne die Darstellung von Bilder, erzeugt- und in Webseiten eingebunden werden können. 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.