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.

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

Useful Collection Of Free CSS Libraries & Resources Here we are presenting a very useful collection of some free CSS libraries and resources for your inspiration. Although there are many scripting and coding websites that can help you in developing your website but here we are presenting free and useful libraries and resources. In addition, there are some scripts also available that you can download and can use for your project. Majority of developers are using codes that are written in CSS or JavaScript or some other languages. We hope that you will like this collection and find this collection useful for you as well. Print.css print.css is an open source print stylesheet for the environmentally-conscious web developer. CSS3 Click Chart Allows you to change how the browser calculates the width of an element, that is, whether or not to include padding, borders, and margins, in the width or height calculation. CSSDeck Collection of Awesome CSS and JS Creations to help out frontend developers and designers. CSS Navigation Pondasee CSS3 Checkboxes

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

SpritePad - Create and edit css sprites 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.

CSS Sprites: What They Are, Why They're Cool, and How To Use Them By Chris Coyier On This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015. #What are CSS Sprites? Spoiler alert: they aren't fairies that write your stylesheets for you. To summarize: the term "sprites" comes from a technique in computer graphics, most often used in video games. CSS Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it. #Why use CSS Sprites? It may seem counterintuitive to cram smaller images into a larger image. Let's look at some numbers on an actual example: That adds up to a total of 14.38KB to load the three images. While the total image size (sometimes) goes up with sprites, several images are loaded with a single HTTP request. Thus, sprites are important for the same reasons that minifying and concatinating CSS and JavaScript are important. $ npm install sprity -g

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

How to make a carousel using only HTML and CSS (no JavaScript required!) Recently, I’ve been working on a site that uses a CMS that’s a bit limiting. I can add my own HTML and CSS to the site, but JavaScript is off-limits. The designs I’m working from included a carousel. I had some ideas of how I could make that work using CSS animations and the transform property, but that would leave me with a carousel that scrolled automatically and didn’t allow for user input which wasn’t really what I was looking for. This is the first item Idque Caesaris facere voluntate liceret: sese habere. This is the second item Vivamus sagittis lacus vel augue laoreet rutrum faucibus. And finally, the third Quis aute iure reprehenderit in voluptate velit esse. Let’s build one! The structure The structure of our carousel goes something like this: We have a main div.carousel-wrapper that gives our carousel its size. Each of our div.carousel-item elements have some content within them, and two links, a.arrow-prev and a.arrow-next, which we use to cycle between the carousel items. <!

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:

Stop Printing Ugly WordPress Pages With This Easy Fix As a WordPress designer, you fret and worry about how your pages and your posts look – on the screen. That’s what it’s all about, right? You look at that new travel-story website you just finished, and it looks great in all the current web browsers. It’s fabulous. A week later, you’re sitting at your computer when the client calls and says, “Hey, our customers are trying to print stuff off that new website you made for us, and everything is a mess – you have to fix that – now!!!” Then you (for the first time ever) choose your browser’s print command, your printer starts whirring and clacking, and by the time you slide over to your printer it’s already printed out three sheets of paper when it should have just been one sheet. Your client is right (aren’t they always?). Your head spins as you try to figure out what’s wrong and what to do, as the enraged client continues yelling into the phone – her voice getting higher and louder. Do People Actually Print Web Pages? Don’t worry.

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

Tips for Writing Modular CSS Matt Lambert No matter how much you love CSS, no one enjoys writing or maintaining style sheets that are 2000+ lines of awesomeness. The smart way to approach your CSS is from a modular stand point. Properly organizing your CSS, breaking it into smaller chunks, and naming classes in a generic way are a few places to start. Let’s review some of my top tips for writing modular CSS Use SMACCS There’s a few systems out there for organizing your CSS but the best one I’ve found is SMACCS (Scalable and Modular Architecture for CSS). Base All native HTML selectors, element selectors, descendant/child selectors, and pseudo-classes. Layout Styles specific to the layout of your website or template. Module Reusable classes or components. States Here you add any state change CSS like alerts or form validation styles. Theme This section is optional but if you have any theme specific CSS that doesn’t fit into any of the above sections, it should go here. Less Variables Less Components One Theme to Rule Them All

Simple Icon Hover Effects with CSS Transitions and Animations Previous Demo Back to the Codrops Article Mobile Desktop Partners Support Security Settings Time Videos List Refresh Images Edit Link Mail Location Archive Chat Bookmarks User Contact Note that the dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0 Mobile Desktop Partners Support Security Settings Support Fav Contract Refresh Settings Time Videos List Refresh Archive Chat Bookmarks User Contact Images Edit Link Mail Location If you enjoyed these effects you might also like: Creative Button Styles Creative Link Effects

Related: