Tag Archives: CSS

Show & Tell: Google Video – How Video Gets to You

by

0

screen-shot-2016-12-06-at-1-13-48-pmGoogle always has awesome animations. They truly are on the forefront of CSS animations. So I was watching a video (Sharon Jones & The Dap-Kings ‘This Land Is Your Land’ live in Chicago) on YouTube the other night, and it was a bit choppy. Google put up a notification bar below the video asking if my video playback was having trouble. Curious, I clicked the link. I was first presented with a Google Video Quality Report. From the page: “There are many factors that influence your video streaming quality, including your choice of Internet Service Provider (ISP). Learn how your ISP performs and understand your options.”

There is also a link that explains how video gets from them to you. This is the part that I loved. The animations show you in simple terms how video travels from them to you, using an image from the video you were watching as an example. Have a look!

Show & Tell: 10 HTML+CSS+JS experiments to try out

by

0

screenshot-2016-11-29-12-29-05I found an article hosted by the CSS Design Awards site that shows off 10 experiments using HTML+CSS (and sometimes JavaScript) to produce some amazing effects.

There’s an effect called tearable cloth, which, while not very practical, shows the amazing things you can do with HTML, CSS and Javascript. There’s a peelable sticker, which I could see used to reveal a coupon code on an e-commerce site. There’s a “jelly” scroll effect for mobile devices that looks sharp. There’s also, for you diehard Star Wars fans, a Star Wars-like text scrolling effect like the movies. And then my favorite, the 3D unfolding dropdown menu.

All of the effects are presented through codepen, so you can see how to implement these effects in your work. Check out the article on CSS Design Awards.

 

Show & Tell: CSS-Tricks

by

0

CSS-Tricks Screenshot

CSS-Tricks always has informative articles about new CSS features and methods, as well as an ever-evolving ‘almanac’ of CSS selectors and properties and how to use them.

CSS-Tricks has got to be, hands down, one of the most interesting and useful resources on the web I have ever found. As CSS has evolved, so too have the methods of doing things, and CSS-Tricks keeps you up to date with the latest.

The site also has an ‘almanac’ feature, where you can lookup CSS selectors and properties. They then show you how to properly use the selectors and properties to achieve the results you’re looking for.

Continue reading →

EXTRA CREDIT: My experience redesigning New Wave Coffee’s website

by

0

New Wave Coffee logoFor my final project in this class, I wanted to redesign the website of New Wave Coffee in Logan Square (where I am currently enjoying a cup of coffee and editing my blog). Their current site consists only of their logo, their hours, their address, and their phone number. I felt they should have a little bit more robust website.

Continue reading →

EXTRA CREDIT: OpenType features and the web

by

0

I ran across an article on the TypeKit Practice blog about OpenType features and how to enable and use them on the web.

OpenType features are more than just fancy swashes, they’re the superpowers of fonts! The best typefaces are full of sophisticated reasoning and little surprises — things that are often integral to the design of the typeface itself, or that help it work better for specific typesetting tasks. Being a graphic design student, I can appreciate the nuances of ligatures and old style numbers, and have always struggled to bring these same features from print over to the web.

Continue reading →

Awesome CSS drop shadows

by

0

You can create beautiful drop shadows in CSS without the need for images (you know, like back in the olden days). With just a little CSS, you can create a few different drop shadow effects, like lifted paper drop shadows, perspective drop shadows, horizontal curved drop shadows, and vertical curved drop shadows. The example code is taken from a drop shadow demo page from a few years ago.

Continue reading →

Forget floats and margin tricks. Flexbox is here!

by

0

I ran across an interesting article on Smashing Magazine that might just change everything. Flexbox is here, and we should all be using it now! CanIUse.com reports that flexbox is supported across all major current browsers. According to the Smashing article:

The days of floats and margin trickery are finally behind us, as CSS furnishes developers with new and improved properties perfect for those delicate layouts. Layout features such as vertical alignment, evenly distributed spacing, source-order control and other patterns such as “sticky” footers are quite effortless to achieve with flexbox.

Flexbox looks like an absolute game-changer. I will admit that I haven’t yet tried it, but am eager to try it out and use it. Anyone else have any experience with flexbox?

Printing with CSS?!? No way! YES WAY!!

by

0

Smashing MagazineSo you have designed a spiffy new website for a client. For argument’s sake, let’s say it’s a restaurant. Everything is there, the menu, specials, location, hours, etc. It looks great, at least on the screen. Now imagine that you want to print out the menu to share with co-workers or friends. Hit ⌘ P. It looks horrible, doesn’t it?

Well, fear not. Our friends at Smashing Magazine show us how we can make our pages look great in print with CSS through the use of @media! If you’ve got a website that you can even remotely imagine that someone would want to print, this is the tutorial for you!