Case Study: Page Flip Effect from 20thingsilearned.com Introduction In 2010, F-i.com and the Google Chrome team collaborated on an HTML5-based educational web app called 20 Things I Learned about Browsers and the Web (www.20thingsilearned.com). One of the key ideas behind this project was that it would best be presented in the context of a book. Since the contents of the book is very much about open web technologies we felt it was important to stay true to that by making the container itself an example of what these technologies allow us to accomplish today. We decided that the best way to achieve the feeling of a real world book is to simulate the good parts of the analogue reading experience while still leveraging the benefits of the digital realm in areas such as navigation. Getting Started This tutorial will take you through the process of creating your own page flip effect using the canvas element and plenty of JavaScript. Before we get started it's a good idea to check out the demo so that you know what we're aiming to build. Markup Logic
media queries "Responsive Design" is the strategy of making a site that "responds" to the browser and device that it is being shown on... by looking awesome no matter what. Media queries are the most powerful tool for doing this. Let's take our layout that uses percent widths and have it display in one column when the browser is too small to fit the menu in the sidebar: Now when you resize your browser it's even cooler than ever! Lorem ipsum dolor sit amet, consectetur adipiscing elit. You can make your layout look even better on mobile using meta viewport.
Musings on the Relationship Between Grids and Guides Though it has been around for years in print design, the concept of working on the grid has become really popular in web design in recent times, especially with the success and availability of CSS frameworks like the 960 Grid System. Many tutorials and articles that I have seen make explicit use if grids, even going so far as to specifically recommend the use of one particular system. Musings on the Relationship Between Grids and Guides That’s great. Though certainly not a necessity, using a grid in web design is a great way to establish a strong, underlying structure that provides consistent, visual unity between the elements in a design. Moreover, the several different CSS grid frameworks that exist out there provide an excellent means of implementing a grid into a site, and can help with process of rapid prototyping. Personally, I’ve been used the 960 Grid System in several designs, and will be using some form of grid in the upcoming redesign of this very blog. Grids Guides The Half Grid
WebSockets e HTML5: il tutorial introduttivo Sin dall'origine del web uno dei suoi limiti principali (ma forse anche una delle caratteristiche che l'hanno resa semplice e dunque di successo) è l'architettura "stretta" client-server, ovvero una modalità di comunicazione in cui c'è un client ben definito che fa le "domande" e un server (web, pensiamo ad Apache) che fornisce le "risposte" (pagine web, immagini, etc.) solo quand interrogato Se questa struttura è perfetta per un web "statico" fatto di pagine collegate fra loro in cui la richiesta di nuovo contenuto è stimolata dal click su un link da parte dell'utente del browser, questa stessa architettura non è per nulla ideale per applicazioni complesse e ricche di comunicazioni bidirezionali (pensiamo ad un gioco multiplayer via web) o dove le informazioni potrebbero dover arrivare quando sono disponibili e non quando l'utente "fa" qualcosa (ad esempio in applicazioni finanziarie o in real-time) WebSockets Ma vediamo come funziona il tutto. Avrete notato il protocollo "
media queries · tutorials · WPD · WebPlatform.org {{{Editorial notes}}} By Mike Sierra Summary Media queries offer an easy way for the client browser to assign different mobile, tablet, and desktop interfaces. CSS media queries offers an easy way to target custom interfaces to more than one kind of device. The media query feature provides a way for a client browser to respond based on inherent characteristics of the device on which it runs. Assigning alternative interfaces Media queries extend an older CSS specification known as media types, which assigned browsers to high-level categories such asscreen and handheld, or print to re-style a web page's printed output. Unlike media types, media queries offer more details about the device. screen and (max-width: 320px) Media queries are enclosed in parentheses and associated with media types with the and keyword. screen and (max-width: 320px), handheld There are three ways to specify media queries: As part of link tags within the HTML's head region. not all and (orientation) Media Query Listeners
CSS3 Image Styles When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output The above code will output the following HTML code: Circle Image (see demo) Now that the image is applied as a background image, you can pretty much add any style to it. Card Style (see demo) Embossed Style (see demo)
CSS: Elastic Videos While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. View Demo Elastic Videos Elastic HTML5 Videos (demo) With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). Elastic Object & Iframe Embedded Videos (demo) The trick is very simple. How to Create Fixed Width & Elastic To restrict the width of the video, an additional <div> wrapper is required. Compatibility This trick works on all browsers (tested on Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone and iPad). Credits This trick was found on tjkdesign.com.
Logic in Media Queries Just in case you have brain farts about this constantly like I do. If That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside. And The keyword and. Or Comma separate. Technically these are treated like two separate media queries, but that is effectively or. Not Reverse the logic with the keyword not. Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Exclusive To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default. Overriding There is nothing preventing more than one media query from being true at the same time. Media queries add no specificity to the selectors they contain, but source order still matters. Mobile First Desktop First Gettin Wacky You can be as complex as you want with this. Share this:
Maximize the Use of Hover Usually, we create hover effects by changing: font color, font styles, border styles, background, and etc. But there are a lot more that we can do with hover. We can use hover to beautify design, minimize clutter, and display additional information. In this article, I'm going to provide various examples of websites that maximize the use of hover. Also, I will provide several quick tutorials on how to create different mouse hover effects. 1. I use hover to beautify the layout of IconDock. 2. QBN makes its layout look cleaner by hiding the extra buttons on default. Gucci puts focus on their product images by hiding the variations. 3. Coda combines CSS and Javascript to create a beautiful tooltip. On Best Web Gallery, I use jQuery to display a larger image of the screencap. Tutorials Image Hover (see demo) The following CSS tutorial imitates the hover effect as seen on the Gucci and QBN site. Animated Hover (see demo) jQuery Tooltip
HTML5, SEO e personal branding: tutorial su authorship markup Nella nostra attività di lettura sul web - siano articoli, post, commenti o tutorial - capita spesso di imbatterci in un autore che ci piace particolarmente e che vorremmo "seguire" in maniera più assidua. Se questo può essere fatto quando, ad esempio, questo autore ha un profilo Twitter sarebbe utile che anche i motori di ricerca ci aiutassero in questa nostra passione, indicandoci ad esempio nei risultati gli altri articoli (magari sullo stesso tema, cioè sulla stessa keyword che stiamo ricercando) scritti da questa persona. Google sta pensando proprio ad un meccanismo del genere, utilizzando gli strumenti e gli standard di semantic web che tecnologie come HTML5 mettono a disposizione. Authorship markup: che cosa è e come si usa Per quanto potente questa tecnica sia l'utilizzo è davvero semplice: l'idea di base è indicare nella pagina dell'articolo un link con attributo "rel" (relazione) con valore "author" e che punta alla pagina dell'autore (su quel sito). Un esempio concreto rel="me"
Media Queries Media queries are an extension to HTML5 that allows features of a user’s display to determine the CSS delivered to the device, as defined by the CSS3 Module. device in portrait orientation with a viewport width of 320px can be detected and given different styles compared to a desktop device with a viewport width of 1024px. Conventionally, the different styling would normally be restricted to layout, backgrounds, and images; in essence, a completely new set of styles can be delivered. As in media types, there are three ways to invoke media-query-dependent styles. Secondly, in XML: And finally, in CSS stylesheets using @import rules: @import url("/style.css") all and (color); Or using @media rules: @media all and (color) { /* one or more rule sets… */ } Once again, responsive web design is providing the tools to create a fire-and-forget approach that produces layouts we can trust. Figure 4.1. We typically try to limit the CSS delivered to each target. Figure 4.2. Figure 4.3. Figure 4.4. scan
CSS3 Transitions And Transforms From Scratch There are some amazing examples of CSS transforms and transitions, and whilst you may be blown away by them, there's a good chance that you're also overwhelmed and a bit intimidated! This tutorial will take you back to the very basics. We're going to create some fundamental CSS3 transitional movements, step by step. A Quick Note on Browser Support: Support across browsers is already pretty reasonable. The Axes and Grid To help understand the movement easily we'll be working on an axis grid (which you'll probably recognize from basic math). The only (crucial) difference is that on our axis the -y value is above the x axis, whilst it would ordinarily be below it. Note: I'm going to assume that you're already familiar with HTML and CSS file structure. 1: Horizontal Movement The first movement we'll demonstrate is "horizontal"; we'll animate the object to move to the right and to the left. Moving to the Right Open your favorite Text Editor and enter the following html markup, then save the file.
HTML5 Canvas Tutorials CSS Media Queries Last updated: 2014-08-11 CSS media queries enable you to apply different CSS styles in your HTML page depending on the device that shows the HTML page. More specifically, media queries enable you to apply different styles depending on the browser window width, device screen width, type of device, aspect ratio and pixel ratio. In many cases it is enough to base your media queries on the browser window width, though. Inserting Media Queries CSS media queries can be inserted in your HTML pages in the following ways: Inserted into a <link> element which refers to a CSS style sheet. An example is shown below for each of these methods: This example shows how to add media queries to a link element. @import url('my-other-css.css') only screen and (max-width: 1200px); This example shows how to import a CSS style sheet from within another CSS style sheet. @media only screen and (max-width: 1200px) { /* css rules */ } This example shows how to insert media queries directly into a CSS style sheet.