background preloader

CSS-Only Responsive Layout with Smooth Transitions

CSS-Only Responsive Layout with Smooth Transitions
A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a "smooth scrolling" effect. View demo Download source In this tutorial we will create a responsive 100% width/height layout with some smooth page transitions. The idea is to have some content panels and a navigation which will allow us to navigate between the panels. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. Note that we will exclude vendor prefixes in this tutorial. The Markup The structure will be consist of a main container with the class st-container which will contain the radio buttons and link, and the wrapper with the class st-scroll for the panels. What we want to do is basically move the panel wrapper by changing it’s top value and bringing the respective panel into the viewport. Related:  Slider et animation css

Dreamweaver CS6 Review – Is it time do ditch Notepad++? I’m the kind of Notepad guy. Back in 2005 the only tools I had to help me learning HTML and CSS were Notepad (yeah, that simple notepad, from Windows) and Firefox (no I didn’t know about firebug back then, my debugging process was kind of awful). So, when I was introduced to Dreamweaver MX 2003 I just got amazed. Code coloring and auto closing tags were luxuries that I just wasn’t used to. Since then I heard a lot of opinions on new editors out there but I just kept using the same ol’ editor, even though my development process includes a lot of other Adobe products. So, after testing the amazing new features of Photoshop CS6, I was wondering if Dreamweaver CS6 has made same great improvement and I gave it a try during the 30 days trial (10 remaining!). Old stuff that is still awesome We have a few features that haven’t changed a lot through the years, but still worth mentioning. Code coloring Don’t know why, but the default code style in Dreamweaver CS6 is just awesome. Auto-complete

2 effets CSS3 assez saisissants Je vais aujourd’hui vous montrer comment réaliser deux effets assez intéressants en CSS3. Le premier est une sorte de fade in / fade out et le deuxième est une lueur externe avec l’attribut box-shadow À ce jour, les transitions en css ne sont pas encore au point sur la plupart des navigateurs mais le fait d’utiliser ces effets ne perturbera en aucun cas la navigation dans votre site. Et pour les navigateurs sur lesquels elles marchent (Safari et Chrome) la navigation sera encore plus agréable. Voici les démos : Le fade in / fade out : La lueur externe : À présent, comment les réaliser… Je vais commencer par le fade in / fade out. et le code css correspondant : À présent la lueur externe : J’espère que cet article vous aura plu.

Awesome Cufonized Fly-out Menu with jQuery and CSS3 In today’s tutorial we will create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and we will slide out a description bar from the left side of the page, […] View demoDownload source In today’s tutorial we will create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and we will slide out a description bar from the left side of the page, reaching towards the current menu item. We will use jQuery for the effect and some CSS3 properties for the style. So, let’s start! The Markup The HTML structure will consist of an unordered list that represents our menu and a div for the description elements: We leave out the description for “Home” since there is nothing to describe. The CSS The background is going to be dark gray: The menu items are hoing to float right:

Showcase: 11 examples of HTML 5 parallax scroll effect TweetTweet The parallax scroll effect means displaying multiple background layers that can be scrolled independently in horizontal and vertical directions.This amazing effect was approached in the beginning of 2011 by Nike in their Nike Better World project, and since then, everyone has approached it and created some amazing works. This showcase presents 11 websites that use the parallax scroll effect in presenting their business. Enjoy and tell me what you think. Bit This Bit This is an advertising agency based in Madrid, Spain, that uses the parallax scroll effect to present their rules or principles. 5 simple principles to connect brands with people like you. New Zealand The New Zealand website is an introduction to tourism in New Zealand. Diablo Media Diablo Media is an online marketing agency that helps advertisers and publishers, to push their products and work, to reach their goals effectively. 360 Long Road Zurich Netlash bSeen Ito Sio Ceni Sullivan Nike for a Better World Iutopi Go Up

On Scroll Header Effects Some inspiration for headers that animate when scrolling the page. View demo Download source You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animations. We’ve also created a Blueprint for an On-Scroll Animated Header to get you started. Today we’d like to give you some inspiration for animated headers and show you what kind of effects could be used to spice up your website’s starting element and give it some life. Please note: this only works as intended in browsers that support the respective CSS properties. Also note that scrolling super fast might cause a jump from the beforementioned class A to class C which might not always look very fancy. The header is composed of various parts for showcasing all the effects.

Top 10 Best HTML5 Websites of 2012 Here are our editor's picks for the Top 10 Best HTML5 Websites of 2016 based on visual artistry, integrated sound, ease of use, and uniqueness. 1 | The Wilderness Downtown The Wilderness Downtown is an interactive music video for Arcade Fire's song ''We Used to Wait''. Visitors are asked to input the address of the home they grew up in and then the site uses Google Earth and HTML5 to create a personalized music video that takes the user on a journey back home. 2 | Heart of The Artic Heart of The Arctic takes users on an Arctic expedition/scavenger hunt through four distinct environments designed to show users the steps that would be needed to restore climate balance to the arctic region. This site perfectly showcases how Html5 can be used to create fun and educational websites. 3 | Three Dreams of Black 3 Dreams of Black uses HTML5 to promote Danger Mouse and Daniele Luppi's album Rome.

Animations pleine page avec CSS - IEBlog Français Depuis la version 9, Internet Explorer prend en charge les transformations 2D CSS. Internet Explorer 10 Developer Preview étend cette prise en charge aux transformations 3D CSS et aux animations CSS. En exploitant la puissance du processeur graphique et en lançant une exécution asynchrone par rapport au code JavaScript standard, ces fonctionnalités d'IE10 offrent une solution plus performante et plus flexible que les animations traditionnelles des contenus Web, généralement basées sur des scripts. Dans de précédents billets de blog, nous avons évoqué les transformations 3D CSS, ainsi que les animations et transitions CSS. Dans ce billet, nous présentons un cas d'utilisation moins courant de ces technologies, en décrivant le concept « d'animation pleine page ». Ces animations peuvent être utilisées au cours de la navigation pour ajouter plus de fluidité et de continuité à la navigation Web. Ces effets peuvent être obtenus en transformant l'élément HTML <body> au moyen d'animations CSS.

5 Ways to Learn Web Design: Which Is Right for You? The web design education industry has exploded from a small niche to a powerful, continually expanding force. Countless people all over the planet are interested in learning about how to build and design websites, and tons of companies are cropping up promising the ultimate solution. The good news for you is that increased competition in this field is a great thing for customers. So Many Options! With some disciplines, the most difficult part of the education process is finding quality learning resources. The problem then shifts from one of scarcity to overabundance. Why Does It Matter? If you’ve ever tried and failed to learn something, then this lesson should ring true with you. “Odds are, you’ll find that you personally have more success using some methods than others.” It often boils down to a question of methodology. The key then is to find out which learning style you tend to have the most success with and find resources that focus on teaching through this method. 1. Learning Style

Animsition: jQuery plugin for CSS animated page transitions - DevPen Home » CSS » Animsition: jQuery plugin for CSS animated page transitions A simple and easy jQuery plugin for CSS animated page transitions. Step 1: Link required files Step 2: HTML markup <body><div class="animsition"><a href=". Step 3: Call the animsition cdnjs css/animsition.csscss/animsition.css.mapcss/animsition.min.cssjs/jquery.animsition.jsjs/jquery.animsition.min.js Demo & Installation Loading... 3D Image Gallery Room An experimental image gallery with a realistic touch: the images are displayed in a 3D room with walls. View demo Download source Today we want to share another 3D experiment with you: a gallery room in 3D. The idea is to create a realistic environment for an image exposition using CSS 3D transforms. Please note that this is highly experimental and probably very buggy. We recommend to view the demos in Google Chrome, they perform best there. We use the following initial structure for adding figures and their captions: We will first transform it into the following structure that will contain a “room” with a main “wall”: The main wall will get a width so that a certain amount of images fits inside. Now, when we reach the end of a wall and rotate to see the next one, we’ll add another wall dynamically and set the right transforms so that it’s in the right angle towards the main wall. Let’s take a look at some screenshots. The next image is placed into another wall a positioned accordingly:

Swiper - Most Modern Mobile Touch Slider Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity. Swiper, along with other great components, is a part of Framework7 - full featured framework for building iOS apps. Powered With Top Notch Features Library AgnosticSwiper doesn't require any JavaScript libraries like jQuery, it makes Swiper much more smaller and faster. Buy Us A Beer If you like Swiper you can always buy us a bottle of a nice beerso we can continue developement of such amazing product and to keep it always free Donate More Great Products By iDangero.us

Circular Elements in Website Design - Best Practice Despite of being one of the basic geometric shapes, circle is not such a frequent guest in website design; of course, I do not consider social media icons. There are a lot of reasons why designers resort to commonly used elements of polyhedral shape such as squares or rectangles. Whether it depends on grid structure and form of a web page that historically has right angles; whether long-term rejection of round form was caused by difficulties of its realization, remember that time, before CSS3 appearance, when designers had to create circular elements by means of graphics editors and only then upload them on website thereby overloading a server by images. Moreover, use of circles can be tricky since they don’t always harmoniously go well with a whole website style. There are two main ways of profitably using circles in website design. Meantime take a look at our fresh collection of websites that were able to make excellent use of circular elements in their designs. Reflection

Blueprint: Google Grid Gallery A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google. View demo Download source This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In the gallery view, the arrow keys can be used to navigate and the view can be closed using the “Esc” key. Please note that we are using CSS 3D Transforms which are only supported in modern browsers. The images used in the demo were created using the grafitti shapes by Luke Roberts. The HTML <div id="grid-gallery" class="grid-gallery"><section class="grid-wrap"><ul class="grid"><li class="grid-sizer"></li><li><figure><img src="img/thumb/1.png" alt="img01"/><figcaption><h3>Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat. The CSS

Expandable Image Gallery in CSS and jQuery An image that expands on click, going full-width and turning into a gallery. Browser support ie Chrome Firefox Safari Opera 9+ We often see the “2 blocks modules” design approach: 50% width image on one side, and text on the other. These modules can be used for an About us section, to explain product features, or, like in our example, for the product preview image and information sections. Generally the user can’t interact with the image. Creating the structure The HTML is structured in 2 main <div> elements (.cd-slider-wrapper and .cd-item-info) – the first containing the image gallery and the second the product info (title, action button..) – wrapped inside a section.cd-single-item. Note that the .cd-slider-pagination element (navigation for paging control of each slider) is not directly inserted in the html but created using jQuery. Adding Style Events Handling We used jQuery to trigger the slideshow mode when user clicks the preview image.

Related: