Developing Responsive Designs With Opera Mobile Emulator Advertisement This is our seventh article in a series that introduces useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts. The fourth shared a free plugin called GuideGuide with us, and later we’ve announced Erskine’s responsive grid generator Gridpak and Remy Sharp’s debugging tool JS Bin. Back in 2009, when coding version 10 of Opera Mobile, my Opera colleagues decided to tune the Opera Mobile build machine so that it would churn out builds not only for common mobile platforms, but for Windows and Linux as well. So, we decided to iron out the wrinkly bits, added a Mac build channel, and turned it into a publicly available developer tool, called Opera Mobile Emulator. Basic Usage When launching the emulator, you are greeted with a profile selector.
CSS3 tooltips If your icon or button has insufficient text or none at all, or it just needs some additional explanation, then you surely need a CSS3 tooltip for it. Why’s that? Because, as they have proved till now, they can help you improve your website usability. Having said that, in this article you’ll learn how to create your own CSS3 tooltips: no images, no javascript. View demo “Do I really need them?” The HTML title attribute is the default additional info you can use. How it’s made The method might be familiar to you, a relative positioned element who wraps an absolute positioned one. Below you can see the proper structure, note the two pointers (made using :before and :after pseudo-elements ) who overlap: How the “bordered” pointer is made Here are the **ingredients **that were used to create them: <a href="#" class="tooltip"> your text <span>Your custom description</span></a> Why an anchor? Just for compatibility reasons. Browser support
Getting Started - Google Web Fonts This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. A quick example Here's an example. Then open the file in a modern web browser. Making the Web Beautiful! That sentence is ordinary text, so you can change how it looks by using CSS. You should now see a drop shadow under the text: And that's only the beginning of what you can do with the Fonts API and CSS. Overview You can start using the Google Fonts API in just two steps: Add a stylesheet link to request the desired web font(s): Style an element with the requested web font, either in a stylesheet: or with an inline style on the element itself: For a list of fonts you can use, see Google Fonts. Specifying font families and styles in a stylesheet URL To determine what URL to use in your stylesheet link, start with the Google Fonts API base URL: For example:
CSS Guide: Welcome! | InsertHTML's Web Codex Hello! This series has been created to teach you everything you need to know about CSS in order to operate in the web design world. We’d recommend doing a few sections a day, and in no time you’ll have mastered CSS! What is CSS CSS stands for Cascading Stylesheet. It’s a web language which defines the layout and style of HTML code. What we’ll be learning We’ll be learning everything you need to function in the real world. At the end of every section we will have a quiz to see how much you’ve learned.
PrefixFree: Break Free From CSS Prefix Hell Advertisement This article is the first piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community. Lea Verou is well-known for her experiments with CSS and JavaScript and in this post she presents her recent tool, prefixfree, which will hopefully help you break free from the CSS prefix hell. So What’s the Problem With Prefixes? I’m sure we all agree that CSS3 is pretty cool and that it enables us to do things that were previously impossible. But those of us who use CSS3 a lot have surely experienced prefix hell, as seen in the snippet below (from a real style sheet!) I’m not saying that prefixes are bad. A Solution: prefixfree The code I write in my live demo slides and presentations doesn’t have any prefixes, even for things like @keyframes or the transition property, which aren’t yet supported anywhere prefix-less. So, what does the rule above become with prefixfree? (al) Footnotes
13 Free Css Editors Online ~ Design Prefix - Web Design and Development Magazine for Daily Inspiration In this article you getting Free Css Editors that available online. Css Editors tools is mainly used for not only edit your css also use for HTML editor. I'm choosing Best Free Css Editors online so you can save time from them. Hi friends, I am the author of the blog designprefix - blog with lessons for beginners and beyond, everyone will find something useful for themselves. On my blog will be able to find their inspiration , join the update, and run in for a visit, always happy. Absolutely every web designer, webmaster or coder must constantly seek the help of a good Web page editor. Notepad + + Below there are a text editor that is used by programmers and web designers. Editor PSPad Editor PSPad is a free text editor designed to simplify the work of programmers. Stylizer - Real-Time CSS Editing Skybound Stylizer is a WYSIWYG-editor CSS styles, one of the best of its kind, working on operating systems Windows. TopStyle 4 for Windows Xyle scope height="250"> Rapid CSS Editor Namo Webeditor
CSS2 - The display declaration The display property lets you define how a certain HTML element should be displayed. display: block display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). Live example: display: inline display: inline means that the element is displayed inline, inside the current block on the same line. display: block display: inline display: none display: none means that the element is not displayed at all (so you won't see it in the example either). display: none display: inline-block An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block. display: block Let's add some content to see how the block behaves. display: inline-block; width: 10emLet's add some content to see how the block behaves. display: list-item display: list-item
Direction-Aware Hover with CSS3 and jQuery How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse. View demo Download source In today’s tip we’ll show you how to create a direction-aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. We’ll use an unordered list for the thumbnails and the description overlays: The list items will be floating left and have a relative positioning because we will make the description overlay absolute: What we will do is the following: depending on the place we are entering with the mouse, we’ll apply the respective “from” style which will set the correct initial position of the overlay. So, the heart of our little plugin is the following part: I hope you enjoyed this little effect and find it useful!
HTML5 Please - Use the new and shiny responsibly rgba.php test page Want to use RGBA in your projects but a solid color fallback for Internet Explorer 8- (and other old browsers) is just not good enough? Do you find that creating fallback semi-transparent pngs is too time-consuming? With rgba.php you get to use RGBA backgrounds in every browser with just one extra CSS declaration! All you need to use it is a server supporting PHP. How? background: url('rgba.php/rgba(255, 255, 255, 0.3)'); background: rgba(255, 255, 255, 0.3); or, for named colors (you specify them, only black and white by default): background: url('rgba.php? The old (v1.1 and below) way of specifying the color also works: background: url('rgba.php? Please note: If you use the a parameter, bear in mind that it ranges from 0-100 instead of 0-1. Get it now from Github Installation Just upload the file somewhere. History I wrote the first version of rgba.php as a complement to a blog post on RGBA that I posted on Februrary 2009.
CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? Animatable: One property, two values, endless possiblities box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou