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
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.
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
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