background preloader

Fullscreen Background Image Slideshow with CSS3

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. The images are by Mark Sebastian and they are licensed under the Creative Commons Attribution-ShareAlike 2.0 Generic License. Note that this will only work in browsers supporting CSS animations. This tutorial is a part of our latest CSS3 experiments; you can find more of those here: The Markup We’ll use an unordered list for the slideshow and we’ll add a span for each image and a division with a heading: <ul class="cb-slideshow"><li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li><li></li><li></li></ul> The spans are going to be the elements that will have the background images of the slideshow. The CSS Let’s style the unordered list first. Now, why those values? Demos

Related:  JqueryCSS3

Elastic Image Slideshow with Thumbnail Preview Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. View demo Download source 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.

Expanding Image Menu with jQuery In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat […] 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. JavaScript Individual or compiled Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js). Using the compiled JavaScript CSS 3 Menu Rotation Tutorial Objective Main objective of this post is to give you How to use CSS 3 in Menu Rotation Step 1 Introduction Today lets make a cool CSS 3 menu bar which can make your website look awesome and distinct from other websites out there.

Fullscreen Pageflip Layout A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. View demo Download source We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. 50 Useful CSS Snippets Every Designer Should Have With so many new trends advancing every year it can be difficult keeping up with the industry. Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been unrequited in comparison. For this article I want to present 50 handy CSS2/CSS3 code snippets for any web professional. These are perfect for storing in your development IDE of choice, or even keeping them saved in a small CSS file.

Interactive Infographic with SVG and CSS Animations Learn how to build an interactive animated infographic using SVG, CSS and JavaScript. View demo Download source One of the less talked about features of newer browsers is increasing support for the SVG file format. If you are unfamiliar with SVG, it stands for Scalable Vector Graphics.