Programatori.info

web programming blog

Archive for category CSS

3D Slides Built with HTML5, CSS3, and SVG

Oct 6

Posted by Web Design CLuj in 3D, CSS, Front Page, HTML, Presentation, WEB 2.0 | No Comments

Over on my personal blog I talk about a 3D slide deck I've created that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to 'zoom' into topics to as deep a level as necessary. Slides are nested, like an outline.

For example, I gave a talk at Future of Web Apps recently on HTML5, CSS3, and other web technologies and only had 40 minutes, so I just skimmed the surface of the slides. However, in a few days I'll be speaking at Fronteers and will be diving deep into SVG and Canvas, so those slides can be zoomed into. The goal is for me to have a universal slide deck that can 'accordian' open and closed to fill either a 40 minute session or an all day workshop, kind of like stretchtext.

Read more to learn about the 3D slide deck and how I built it.

Simulating :hover and Double Clicks With Pure CSS on Mobile Devices

Sep 16

Posted by Web Design CLuj in CSS, Front Page, WEB 2.0 | No Comments

When creating mobile web apps on devices like the iPhone, iPad, and Android you lose the beloved CSS :hover property which can make things so much easier to create. Chris Coyier has been exploring how to respond to single and double clicks still using pure CSS even when we don't have :hover.

For single clicks, Chris has found that you can use tabindex as a trick to simulate :hover.

Chris creates a sample where he has an image expand when 'hovered' over:

Chris has the following HTML markup using HTML5 (notice the tabindex property):

PLAIN TEXT
HTML:
<section class="image-gallery">

   <figure tabindex="1">
      <img src="images/img-1.jpg" alt="jump, matey" />
      <figcaption ">Jump!</figcaption>
   </figure>

</section>
 

Each image/figure is given a tabindex one higher than the last one.

The image/figure can then be hooked onto using the :focus property, which will work on mobile devices when a user presses their finger onto the element. When this fires some CSS will cause the outline to disappear; the image to rotate and scale larger; and a box shadow to appear:

PLAIN TEXT
CSS:
figure:focus {
  outline: none;
  -webkit-transform: rotate(-3deg) scale(2.5);
  -moz-transform: rotate(-3deg) scale(2.5);
  -webkit-box-shadow: 0 3px 10px #666;
  -moz-box-shadow: 0 3px 10px #666;
  z-index: 9999;
}
 

Once he had single-click under his belt, Chris moves on to trying to get a CSS solution for double-click for mobile devices. He mentions that for this its a bit more CSS nerdery since JavaScript is pretty straightforward in this case:

For anyone interested, “dblclick” is a native JavaScript event. If you wanted to, for example, force links to be double clicked instead of single clicked, you could bind a simple { return false; } function to the click event. Then also bind a function to dblclick that would change the window.location to the links href attribute.

This article isn’t about that, it’s about hardcore CSS nerdery and seeing if we can also do it without using JavaScript.

See Chris' demo and blog post for more details on the double-click CSS solution.

The CSS Awards

Sep 16

Posted by Web Design CLuj in CSS, Front Page, WEB 2.0 | No Comments

CSS has always been a powerful tool in the web programmer's arsenal, especially today with CSS3, CSS Animations/Transforms/Transitions, CSS FlexBox and Columns, CSS with SVG, etc. If you're trying to do it all with JavaScript, many times you are probably doing things wrong -- a CSS solution will often be more elegant, terse, and performant.

This is why it's important to stay on top of the latest CSS work. I've found The CSS Awards web site a great way to do this. The CSS Awards is:

[a] gallery of the most prestigious websites in the world created with CSS. An international jury of the top designers, agencies, and bloggers will award prizes to the best CSS websites.

A new CSS website is posted every day.

CSS 3 Live: Progressive Enhancement

Sep 14

Posted by Web Design CLuj in CSS, Front Page, Tutorial, Video, WEB 2.0 | No Comments

From SitePoint comes a nice series of videos on CSS3, called CSS Live. Here's one on Progressive Enhancement when using CSS3 features:

Animated CSS3 cube using 3D transforms

Sep 13

Posted by Web Design CLuj in Animation, CSS, Front Page, WEB 2.0 | No Comments

I've been doing alot of experimenting with HTML5/CSS3 on the iPhone doing animation, and I've been surprised with the low frame rate of animating through Canvas or SVG. If you are trying to do animation, especially 3D, on the iPhone it seems like the name of the game is to it through the GPU, and the only way to do that these days on iOS is CSS3 Animations/Transitions/3D.

These experiments caused me to stumble on Paul Hayes interesting work simulating a 3D animated cube using CSS3, hence they happen on the GPU on the iPhone/iPad and are quite fast:

A 3D cube can be created solely in CSS, with all six faces. Using JavaScript to detect key presses and update inline styles this cube can be intuitively navigated.

Demo (Webkit only)

Paul achieves this by having each face of the cube be a unique DIV, each with a 'face' class and inside of a larger 'cube' class all wrapped by an 'experiment' class:

PLAIN TEXT
HTML:
<div id="experiment">
        <div id="cube">
                <div class="face one">
                        One face
                </div>
                <div class="face two">
                        Up, down, left, right
                </div>
                <div class="face three">
                        Lorem ipsum.
                </div>
                <div class="face four">
                        New forms of navigation are fun.
                </div>
                <div class="face five">
                        Rotating 3D cube
                </div>
                <div class="face six">
                        More content
                </div>
        </div>
</div>
 

The outer wrapper is the camera and allows you to apply perspective and where you want the perspective origin to be:

PLAIN TEXT
CSS:
#experiment {
    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 200px;
}
 

The #cube itself is given a size, CSS transition properties so things will animate nicely, and an instruction to preserve 3D children and not 'flatten' them:

PLAIN TEXT
CSS:
#cube {
    position: relative;
    margin: 0 auto;
    height: 400px;
    width: 400px;
    -webkit-transition: -webkit-transform 2s linear;
    -webkit-transform-style: preserve-3d;
}
 

Each of the faces is given some common styling:

PLAIN TEXT
CSS:
.face {
    position: absolute;
    height: 360px;
    width: 360px;
    padding: 20px;
    background-color: rgba(50, 50, 50, 0.7);
}
 

The individual face DIVs are then rotated and translated in 3D space into their correct positions:

PLAIN TEXT
CSS:
#cube .one {
      -webkit-transform: rotateX(90deg) translateZ(200px);
    }

    #cube .two {
      -webkit-transform: translateZ(200px);
    }

    #cube .three {
      -webkit-transform: rotateY(90deg) translateZ(200px);
    }

    #cube .four {
      -webkit-transform: rotateY(180deg) translateZ(200px);
    }

    #cube .five {
      -webkit-transform: rotateY(-90deg) translateZ(200px);
    }

    #cube .six {
      -webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
    }
 

Read more in Paul's post.

Adobe Announces HTML5/CSS3/SVG Pack for Illustrator

Sep 12

Posted by Web Design CLuj in Adobe, CSS, Front Page, SVG, WEB 2.0 | No Comments

Exciting news from Adobe; they've announced a new HTML5 Pack on Adobe Labs with support for HTML5, CSS3, and SVG:

Adobe is pleased to announce the availability of the Adobe® Illustrator® CS5 HTML5 Pack. This add-on for Illustrator CS5 15.0.1 provides initial support for HTML5 and CSS3, extends SVG capability in Illustrator CS5, and helps you easily design web and device content. In combination with the HTML5 features available in the Adobe Dreamweaver CS5 11.0.3 updater, these new tools allow web designers to take advantage of the latest advancements in HTML5.

While HTML5 and CSS3 will not be finalized for some time, and SVG support in browsers will continue to evolve, the extension provides support for a set of currently implemented features.

Some of the benefits of the HTML5 Pack:

  • Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.
  • Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.
  • Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.
  • Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.

Greg Rewis discusses it more in the video below:

Mordy Golding has a good description of some of the new features in this lab pack:

Parameterized SVG

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to "reskin" or modify the art. You can even create global variables.

Multi-screen SVG

You can create multiple artboards in Illustrator at various sizes, for example to design art for different screen sizes. You might do this to create different designs for mobile, tablet, and desktop versions of a design for example. You can then save your file as SVG and include all the different artboards. Illustrator creates an HTML file and a CSS file, along with separate SVG files for each artboard. The CSS uses media queries to detect the screen size and automatically serves up the correct SVG image.

Mark objects as canvas in SVG

You can select an object on the Illustrator artboard and then choose Object > HTML5 Canvas > Make. These elements are rasterized and included as canvas elements when saved as SVG, giving developers the ability to control the elements via JavaScript.

Export named character styles as CSS

You can define character styles in your Illustrator document, and then export those character styles as a valid CSS file. You can do this directly from the Character Styles panel.

Export artwork appearances as CSS

You can select an object in Illustrator and export valid CSS directly from the Appearance panel. Of course, if you mockup an entire page in Illustrator, you can simply select all of it and export it to a single CSS file. IDs are picked up from the Layers panel (so you want to name artwork carefully), and Illustrator can export Fill, Stroke, Opacity, and Absolute Position and Dimensions.

Include selected Graphic Styles as CSS in SVG

You can select styles from the Graphic Styles panel and choose to have them exported when you save your file as SVG. What's really cool is that you can include styles even if they aren't applied to your artwork. This would allow you to deliver multiple styles to a developer within a single SVG, and even programmatically swap styles.

Great work Adobe!