CSSDeck Liked

Man kann auf CSSDeck Projekte anderer Nutzer besonders kennzeichnen, das nennt sich dann Like this Creation.

Sliding Menu Item with Description

A simple CSS menu with items having description. A cool sliding effect on hover.

Prefixfree, Normalize

http://cssdeck.com/labs/full/menudesc

CSS3/Javascript Pure Dropdown Menu

Hi ! Its maybe wrong, but it seems you have to add the event.preventDefault(); just after the onclick funtion, and not on the if{} statement. This way the white flash will not appear.
(chrome 29)

SCSS w/ Compass

http://cssdeck.com/labs/full/css3-javascript-pure-dropdown-menu

product-item-additions-info

This is made width both Css and Javascript, though the javascript is only for activating the menu.

The additional info loading up when hover is made purely with css, and is "dynamic" so it will expand upwards with whatever content is put there.

This is possible with the mixed use of transform:translate and position:absolute.

I found that moving a element with transform:translate 100%, positioned 100% of the elements height and not the parents height, wich made this possible without use of javascript.

Credits:

The beautiful product image: http://chrishavron.deviantart.com/art/Shoe-Product-Shot-153146832

Inspiration after seeing this piece of work by: Virgil pana: http://dribbble.com/shots/986548-Product-Catalog

Inspiration from the new myspace design: http://myspace.com

Prefixfree, Normalize

http://cssdeck.com/labs/full/l6pzd5vm

Ribbon Menu

This is a beautiful ribbon menu created using CSS. Created by Jack Moore (innovator of ColorBox). http://www.jacklmoore.com/notes/css3-ribbon-menu/

Prefixfree, Normalize

http://cssdeck.com/labs/full/ribbonmenu

Account Menu

:hover Menu (concept)

Prefixfree, Normalize

http://cssdeck.com/labs/full/account-menu

Css3 horizontal menù

it's simple and clean Css3 horizontal menù. With css3 box-shadow and transition.

Prefixfree, Normalize

http://cssdeck.com/labs/full/uhvocnp8

Navigation dropdown with unfold effect

flat navigation dropdown menu with unfold effect

Prefixfree, Normalize

http://cssdeck.com/labs/full/navigation-dropdown-with-flip-effect

Simple Dropdown Menu

Try making the dropdown responsive or maybe change the editor layout to horizontal so that the nav doesn't breaks on smaller resolutions.

Prefixfree, Normalize

http://cssdeck.com/labs/full/qyb5yqnz

Dropdown menu

Prefixfree, Normalize

http://cssdeck.com/labs/full/dropdown-menu

Sharing menus

Prefixfree, Normalize

http://cssdeck.com/labs/full/sharing

Css-only Lavalamp-like Fancy Menu Effect

siehe http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/

Cool! Forked this and made 2 more skins and «active» class.

http://cssdeck.com/labs/lavalamp-menu-on-css

CSS3 navbar with Responsive Collapse

This Nav is the first addition to obs-stuff library, with multiple options and more to come. The purpose of this, of course, was to help simplify the creation of beautiful CSS3 nav menus, and to help jump start the creation of websites.

For more information and docs visit http://www.coding-stuff.com/responsive-css3-driven-navigation-menu/

Accordion

more at: https://github.com/luis-almeida/menu

SCSS w/ Compass

http://cssdeck.com/labs/full/yckart-accordion

Create Great CSS3 Menus for SmartPhones

We'll create a nice looking menu in CSS3 that can be used in smartphones or tablets or as a widget in blog/website sidebars.

The CSS3 features used are box shadows and linear gradients.

Note: I normally use rgba/hsla for the colors in box shadows, linear gradients, but in the lesson I have used plain hex to save some typing.

Prefixfree, Normalize

http://cssdeck.com/labs/full/create-great-css3-menus-for-smartphones

Pure CSS 3D Menu

SCSS/Compass version with Firefox compatibility
http://cssdeck.com/labs/vhtlx619/1

Prefixfree

http://cssdeck.com/labs/full/pure-css-3d-menu

Perspective Menu

http://cssdeck.com/labs/full/perspective-menu

CSS3 Animated Clouds - The Simple Way

Many wonder how hard it is to make clouds in pure CSS. Actually, it's quite easy!

I am going to show you how you can make a stylish CSS cloud (and animate it a bit) in a few steps and least number of lines in your CSS code.

Basically the first step is the make the base of the cloud (check out Step 1 in the demo). So, all you need to do is style a basic div:

.cloud_base {
    background: white;
    
    height: 100px;
    width: 300px;
    
    border-radius: 50px; /* half of height will do */
    
    position: relative;
    top: 120px;
    
    box-shadow:
        inset 5px -9px 5px rgba(225, 245, 253, 0.5),
        0px 0px 10px 6px rgba(240, 240, 240, 0.7);
    
    /* for basic little animation */
    -webkit-transition: 0.2s ease-in all;
    -moz-transition: 0.2s ease-in all;
    transition: 0.2s ease-in all;
}

Next you just make the rounded parts of the cloud. You could probably use a div but I used a span. The black-ish shadow is applied to the span element using CSS3 box-shadow while the circles are made by styling the pseudo-elements of the span which are absolutely positioned and have several box shadows for the outer and inner (inset) shadows.

The Final step is to position all the elements properly (I have hardcoded everything with px, maybe there are better ways) and adding some animation sugar with CSS3 transition.

That's all! Here are few more CSS cloud experiments:

• Sunny Valentine Day
• Soothing Clouds
• Moving Clouds Animation

CSS Navigation

CSS navigation bar with dropdown elements and transition effects. There is one issue which is when you move your mouse cursor over the dropdown menu slowly, it hides. So, you need to move your mouse quickly to hover on the dropdown elements. It has some easy and quick color adjustments also which is done by using jQuery. Icons by Entypo.

http://cssdeck.com/labs/full/css-navigation

Transitioning Background Colors with Color Choosers

http://cssdeck.com/labs/full/transitioning-background-colors-with-color-choosers

Soothing CSS3 Dropdown Animation

Animated dropdown menu by Alex Penny. I have improved the code a lot from the original version for the better and more cross browser compatibility.

http://cssdeck.com/labs/full/soothing-css3-dropdown-animation

Animated Pac-man in Pure CSS3

Animated Pac-man made by Veli. Uses No Images, No Javascript. The animation is done using the animation and keyframes properties that (for now) only works in the Webkit browsers and Firefox.

http://cssdeck.com/labs/full/animated-pac-man-in-pure-css3

CSS3 Scroll Drop Down Menu

A beautiful navigation in css3.

http://cssdeck.com/labs/full/css3-scroll-drop-down-menu

CSS3 navigation

CSS3 navigation menu inspired by http://cssdeck.com/item/234/smooth-two-level-css3-navgation-menu

http://cssdeck.com/labs/full/css3-navigation

Ring Menu

CSS3 Ring Menu by EdoM18. This is just a simple unordered list with five links as the list items. The first link is served as the main trigger of the whole rotating action. The other four links are placed around the main link and are positioned according to the main animation. These links are scaled down to 0 and rotated to -180 degrees and when the main link is hovered, these are scaled up to 1 and rotated to 0 degree which makes it look like the links are behind the main link and they appear while rotating and scaling up.

The rotation animation is made possible by using transitions and by using transform-origin so that these links rotate with origin as the center of the main link. It's a pretty neat and cool technique that won't work in IE as it doesn't support transition property yet. 

http://cssdeck.com/labs/full/ring-menu

Cute Bubbles

Cute bubbles, hearts and some random shapes by GeckoTang.

http://cssdeck.com/labs/full/cute-bubbles

Mirror Effect

CSS3 Mirroring Effect achieved with the Transform module. You might want to read this article to understand Matrix Transforms properly. Also, the author of that article made a nice tool that is relevant. The text in the demo is contenteditable.

So try adding and deleting some text and observe the behaviour.Try something cool with the demo, like replace all HTML code with just an iframe with a particular source and it's height and width set to 100%. If you try it, you might also need html, body { height: 100%; } in the CSS code. I am sure the result will amaze you!

http://cssdeck.com/labs/full/mirror-effect

CSS3 Monkey

Cute CSS Monkey by Calmbooks. This monkey might remind you of Pikachu (or Pichu or Raichu :D). The CSS is nicely broken into different parts like head, body, mouth, eyes, etc. that are properly demarcated with comments. The demo is displayed best in Webkit browsers like Chrome/Safari or Firefox.

The entire creation makes good use of some of the new significant CSS3 Features like animations, transforms and border radius. Tell us what you think about the sweet monkey in the comments!

Still hard to believe about how he creates a rounded effect also applies to each end of the rounded line. How can it be?
Oh, and also, check this CSS3 Experiment too: http://knb.im/css3/

http://cssdeck.com/labs/full/css3-monkey

Collection of menu effects

A collection of menu effects, in pure CSS, which degrade gracefully in IE8. It is inspired from the Scroll Effects created by hakimel. There's a "hardcoded" limit of 8 items per submenu. If you have more or much less than that, you should edit the Progressive Anim section of the CSS. Some of the effects uses CSS 3D transform which only works in Webkit browsers but degrades gracefully in FF and other browsers.

The project is available on Github.

http://cssdeck.com/labs/full/collection-of-menu-effects

CSS Image Sprite Animations With steps() Function

Understanding CSS3 steps() animation-timing-function can be tricky. Recently I used it in the Doodle Experiments.

Today, while googling for some related terms, I came across this quick experiment by Simurai that demonstrates the working of the timing function nicely. To change the speed just edit the .8s animation time.

Basically, the steps() function progresses the animation in equidistant steps based on the animation-duration (0.8 second in this experiment). This helps you achieve an effect where the animation simply changes its states/steps without undergoing any animating/easing effects.

http://cssdeck.com/labs/full/css-image-sprite-animations-with-steps-function

Blue Grid Background with a Sphere

Interesting experiment by Tom Doyle that is full of grids with a sphere (resembles the sun) in the center. The grids have been formed by using CSS3 Repeating Linear Gradients while the Sphere is the result of Radial Gradients. If you have worked with CSS3 Gradients before then it should be fairly simple to figure out how to customize it. Try changing the color of body in the code editor (or web developer tools) and see how nicely the live preview of the item changes.

Have a Full View for a better experience.

http://cssdeck.com/labs/full/blue-grid-background-with-a-sphere

Another Simple CSS3 Dropdown Menu

Another simple yet amazing dropdown menu in pure CSS3 by Josh Riser. This code does not uses child selector >, although that might be prefered when there are multiple levels. Nice touch of CSS3 box-shadow, transition and text-shadow to achieve better user interface and interaction.

http://cssdeck.com/labs/full/another-simple-css3-dropdown-menu

CSS Noughts and Crosses

Tic Tac Toe in Pure CSS and HTML, no Javascript by Taku AMANO. If you don't know how to play this game then read this article. The game is supported in Firefox 4 and above, Chrome 13 and above and Opera 11 supports most of it. My condolences to Internet Explorer Users.

http://cssdeck.com/labs/full/css-noughts-and-crosses

Smooth Two Level CSS3 Navgation Menu

Smooth Two Level CSS3 Navgation Menu by Jack Rugile. The attention to details on this navigation menu is just amazing! It gives a very smooth feeling that only jQuery could give some time ago. Very clever use of box-shadow, borders, linear-gradient and transition. Even the color transitions are very smooth in this menu.

This menu is worth checking out!

http://cssdeck.com/labs/full/smooth-two-level-css3-navgation-menu

Bold and Beautiful Drop-Down Navigation Menu

Very beautiful and bold looking navigation menu created by Jordan Austin. This menu is two level and has some pretty cool animation effects achieved by using transition property of CSS3 when the link or menu is hovered.

The dropdown menu is initially hidden by setting its visibility property to hidden and opacity to 0. When the link is hovered, the visibility is set to visible and the opacity to 1 with some changes in position to make the animation better. Take a look at the code to understand what's happening

http://cssdeck.com/labs/full/bold-and-beautiful-drop-down-navigation-menu

Android on Crack

Android Dancing on Flash (or Disco?) Lights made by xl1blue with massive use of animations and transforms. Clearly shows what you can achieve with CSS3 in 2012. Don't forget to notice the android's hands and legs movement as it dances! I haven't added the -o- and -ms- prefixes, and do not plan to add them to the fancy items in future because of several reasons. It makes our work harder (time consuming) and moreover, the process of fiddling with the code becomes harder affecting the learning experience of the visitors. Chrome and FF are going to be the most popular browsers sooner or later anyway.

(Not sure why the original author put a Sony Ericsson Ribbon on the Android - maybe because he is from Japan)

http://cssdeck.com/labs/full/android-on-crack

Navigation

Home CSSDeck Liked CSSDeck Forked CSSDeck Eigene Business Profile stripes green Produkt Broschure stripes red Contakt Form stripes purple Blank Page stripes pink Blank Page stripes blue Blank Page stripes orange Blank Page stripes brown Blank Page basic grey Blank Page basic purple green Blank Page basic blue grey BPGS.DE Testseite Thema Leer