CSS Responsive Videos

Again, these are old tricks but new to me as I get back into developing new sites rather than supporting Telerk based ones.  In the previous post I shared a CSS snippet on how to make images responsive.  Now onto video.  A lot of sites offer ways for you to copy some code that allows you to paste their videos into your various web sites.  Many use iframes to do this which can be a little problematic.

The following CSS snippet works for youtube videos at least.  I just take whatever copy/paste code form a given site that allows me to embed things and wrap it in a div with the class "vid".  Here is the CSS.

 .vid {  
   position: relative;  
   padding-bottom: 56.25%;  
   padding-top: 30px;  
   height: 0;  
   overflow: hidden;  
 }  
   .vid iframe, .video-container object, .video-container embed {  
     position: absolute;  
     top: 0;  
     left: 0;  
     width: 100%;  
     height: 100%;  

This seemed to work.  More information [HERE].

CSS Responsive Images

This is an old trick but I didn't know it.  Here is how to make your images auto scale-

 img {  
      max-width:100%;  
      height:auto;  
 }  

More [HERE].

Also check out the new picture HTML 5 element [HERE].

Avoid Common CSS Problems

Here is a useful link in avoiding common CSS problems when you are creating CSS from scratch.

Problems addressed are pushing your footer to the bottom and padding issues.  Basic but if you aren't in CSS everyday but when you are you like to start from scratch this is useful.

http://helabs.com.br/blog/2014/01/21/prevent-common-problems-when-writing-css-from-scratch/

The Magic Footer

I've done this before, but like usual if I only do it once in a while I forget how. The task at hand? Have a footer on a web page that stays at the bottom of the page. I did a quick search, and here are two ways (though there are others) of doing this.

1) Frack older browsers, and do it the easy way,

2) Or two, do a minimal CSS hack so you can support IE6 and older versions of Safari.

So here is some reinvent the wheel code. For number one, you just need a bit of CSS.

.footer{ width:100%; height:50px; position:fixed; bottom:0px; z-index:1000;}

then on your page, <div id="footer" >

done.

For step two, try this approach.

CSS bottom footer by MJT, or google fixed footer.

Random Photoshop, CSS, and UI links

Here are a bunch of random UI, CSS, and Photoshop links.

http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/
http://sixrevisions.com/graphics-design/photoshop_text_effect_tutorials/
http://sixrevisions.com/resources/cheat_sheets_for_web_designers/
http://designreviver.com/tutorials/50-excellent-body-enhancement-photoshop-tutorials/
http://psdtuts.com/web/20-insane-comic-book-style-photoshop-effects/
http://speckyboy.com/2008/08/28/75-powerful-adobe-fireworks-extensions-it-really-can-be-as-great-as-photoshop/
http://psdtuts.com/tutorials-effects/40-dark-and-futuristic-photoshop-effects/
http://www.sitepoint.com/article/top-ten-css-tricks/
http://www.hongkiat.com/blog/30-nicest-photoshop-photo-effects-part-ii/
http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html
http://www.photoshoptechniques.com/texp/fireptk.php

Column Side Gradients

I suck at Photoshop, not because I really suck, but because I don't get much time in on the design side. Too bad because I enjoy the design side a lot. I think ultimately I'd like to phase back on the coding side and spend more time on the design side. I figure the programming spectrum goes like this-

• Blur between Web Application Developer and Hard Core Low Level Programmer
• Web Application Developer
• Web Scripter
• Web Designer
• HTML Content Developer

I think I'd like to find myself in the "Web Scripter" category, someone who does back-end database programming, but also does design work. I think I could meet a lot of small business user needs that way. Small business owners don't need or care about the craft of programming, and they can't support the budget for solutions based on those methodologies, but small business owners do need interactivity and data storing/retrieval. A nice blend of task for a single coder or a small team. I think I'm getting burned out a little bit on the application development side of things. I see a lot of extra abstraction layers being added into the mix, which is all well in good, but often times the extra effort is unnecessary and it is only done to please the herd.

Anyway, that is neither here nor there. Here is a link to a Photoshop/CSS tutorial on how to create gradient fades on the sides of content columns, something I'm seeing a lot of these days.

http://www.projectseven.com/tutorials/images/gradient_tiles2/index.htm

Why Mess with Photoshop: Rounded Corners Auto Generator

http://www.allcrunchy.com/ has a pretty cool auto generator for creating rounded corner divs. You have to download an image and paste some css and javascript on your page, but all and all this is pretty cool.

Check it out [HERE].