background preloader

Fixed Background Scrolling Layout

Fixed Background Scrolling Layout
A fixed background image scrolling layout with 100% height panels and smooth scrolling. View demo Download source A simple scrolling layout with fixed background images using background-attachment: fixed and a navigation. The page will scroll smoothly to the selected section. The HTML <div id="cbp-fbscroller" class="cbp-fbscroller"><nav><a href="#fbsection1" class="cbp-fbcurrent">Section 1</a><a href="#fbsection2">Section 2</a><a href="#fbsection3">Section 3</a><a href="#fbsection4">Section 4</a><a href="#fbsection5">Section 5</a></nav><section id="fbsection1"></section><section id="fbsection2"></section><section id="fbsection3"></section><section id="fbsection4"></section><section id="fbsection5"></section></div> The CSS

Related:  Banque d'effet JSCSS3webdesign

Text Opening Sequence with CSS Animations A simple and fun text opening sequence effect with blurry letters using CSS animations. View demo Download source Today I want to show you how to create a fun little typography effect with CSS animations and text shadows. Maybe you know those eerie opening sequences of movie trailers where some text is being faded in on a dark background. Creating a Responsive Menu In this tutorial I'm going to show you how to create one of the responsive menus from our website. You can find the menu here. So, the final result will look like this: The Markup We're going to start with the HTML code. Our menus use nested unordered lists contained by a div. Vertical Timeline A responsive vertical timeline layout with icons and example media queries. View demo Download source This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list. The HTML

Fullscreen Layout with Page Transitions A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items. View demo Download source Today we’d like to share an experimental responsive layout with you. colors » CSS INTENSIVSTATION Farbnamen, Angaben in Hexadecimal, RGB, RGB(A), HSL, HSL(A), all diese Angaben sind heute im täglichen Einsatz anzutreffen. RGB(A) & HSL(A) sind Definitionen der W3C-CSS3 Recommendation (Empfehlung). Alphatransparenz wird ab IE9+ dargestellt. Nicht alle Browsern unterstützten zur Zeit alle Empfehlung.

The 17th Surgery Seconds later, seemingly out of nowhere, Noah was next to her. He was crying and covered in ash — but he was okay. Pete’s aunt, who’d been standing near them during the explosion, had picked him up and brought him over to Rebekah. “I thought it was a sign,” she says. ”I thought, ‘He’s here, he’s okay. And now I really am going to die.’” Creating a Border Animation Effect with SVG and CSS The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines. View demo Download source Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS.

Fullscreen Background Image Slideshow with CSS3 Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appear using CSS animations. View demo Download source Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow.