Image hover effects & Customize css for different devices

I. Simple but effective and look good:

[1] http://designshack.net/articles/css/joshuajohnson-2/
[2] http://designshack.net/tutorialexamples/imagehovers/index.html


II. Customize css for different devices. Example:

/* >= 768. Desktop. */
@media only screen and (min-width:768px){
    #slide_img1, #slide_img2, #slide_img3
    {
        display: block; max-width: 100%; height:auto;
    }
}

/* < 768px. Mobile. */
@media only screen and (max-width:768px){
    #slide_img1, #slide_img2, #slide_img3
    {
        display: block; max-width: 800px; height: auto;
    }
}

[3] http://stackoverflow.com/questions/22839792/bootstrap-3-custom-css-class-depending-of-devices

Normalize.css, an alternative to CSS resets

From [1]:

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

From [7]:

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?

Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser. (NB: article coming soon about why this is a false notion!)

Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.


[1] About normalize.css
[2] https://github.com/necolas/normalize.css/
[3] https://necolas.github.io/normalize.css/
[4] Applying Normalize.css Browser Reset CSS (video)

[5] CSS Tools: Reset CSS
[6] http://cssreset.com 2015’s most popular CSS Reset scripts, all in one place.
[7] What Is A CSS Reset?
[8] http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css

CSS Box Shadow

CSS Box Shadow

Basically you use this css:

div {
    box-shadow: 0px 20px 15px -15px rgba(0,0,0,0.49),  /* bottom */
                10px 0px 15px -15px rgba(0,0,0,0.49),  /* right */
                -10px 0px 15px -15px rgba(0,0,0,0.49); /* left */
    -webkit-box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49),
                         10px 0px 15px -15px rgba(0,0,0,0.49),
                         -10px 0px 15px -15px rgba(0,0,0,0.49);
}

The 5 parameters are:

1. The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
2. The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
3. The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
4. The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
5. Color

Avoid text/image/video width overrun with css

Say you have a html table or div, or in the case of mobile device browser. A long text segment, or image, or video (e.g., from youtube, using iframe), whose width is too long to fit in the parent container, this will break the layout. Since I'm working on a forum compatible with both desktop computer and mobile devices, here are my findings on the solutions.

== text ==

Use this in display:

<pre class="forum">content</pre>

Of course, it does not have to be pre tag. It can be a div too. In css [1]:

pre.forum {
    /* Wrap long text with space in the middle. */
    white-space: pre-wrap;       /* Wrap text as needed. CSS 3. */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+, Non standard for webkit */
  
   /* Wrap long text without space in between. */
 -ms-word-break: break-all;
     word-break: break-all;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
}

This css works for both desktop browser and mobile browser.

== Image ==

Use this in display:

<img src="..." class="media_img">

In css:

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

Note here use max-width instead of width, because if the image width is less than device width or parent container width (in desktop browser), we want to keep the image width and not expand it. This css works for both desktop browser and mobile browser.

This will always work in Safari. However, this may fail in firefox, if the "width" value is specified in the img tag, e.g.,

<img src="..." width="1500" class="media_img"> 

The way to fix this, is to wrap the img tag with another div tag, whose width is specified as an absolute value (the max design value):

<div class="media_img_container"> <img src="..." width="1500" class="media_img"> </div>

In css:

div.media_img_container {
    width: 1000px;
}

Then the image will be at most 1000px in width, despite the specification of width="1500" in img tag. This also means that for different design width, you need to specify different div container width.

== Video ==

For desktop browser, this usually is not a problem, since video width is often around 500px. For mobile device, this can be a problem since mobile browser width can be only 320px, so the css here can be used. This css will resize the video iframe to always match device width.

In the case the iframe width is less than device width, this will expand the iframe width. If you don't want to do it, maybe you can check the width parameter in the iframe tag and don't apply this css.

Use this in display:

<div class="aspect-ratio"><iframe ...></iframe></div>

In css [2]:

.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* height/width, usually 3/4 on youtube */
}

.aspect-ratio iframe {
    position: absolute;
    width: 99%;  
    height: 99%;
    left: 0; top: 0;
}


References:

[1] http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
[2] http://fettblog.eu/blog/2013/06/16/preserving-aspect-ratio-for-embedded-iframes/

css - make a footer stick to the bottom of page

Make a footer stick to the bottom of page

This is the one that seems to work for all browsers including IE. Good.

Dropdown menu

Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation
IF Internet Explorer THEN Do Something Else (A How To…)

HTML 5

Some cool HTML 5 stuff:

CanvasMol
13 Amazing Examples of HTML5 and CSS3
20款绝佳的HTML5应用程序示例
学习HTML5不可错过的12家国外网站
Create a Drawing App with HTML5 Canvas and JavaScript
3D effect with only html and css: CSS 3D Meninas
Solving the Traveling Salesman Problem with Genetic Algorithms and HTML5 Web Workers
HTML5笔记(1-3)
HTML5 differences from HTML4

Web开发人员应当知道的15个开源项目