This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Thursday, 13 October 2011

HTML5 File Upload with Drag & Drop

05:39  Unknown  No comments


Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration. This is the first in a four-part series of posts from SitePoint which describes how to:
  1. Enable file dragging and dropping onto a web page element
  2. Analyze dropped files in JavaScript
  3. Load and parse files on the client
  4. Asynchronously upload files to the server using XMLHttpRequest2
  5. Show a graphical progress bar while the upload occurs
  6. Use progressive enhancement to ensure your file upload form works in any browser
  7. Code it in plain ol’ JavaScript without a library.
Step:1 Copy and Paste 
File Name: filedrag.js (you must use this filename exactly)
(function() {
// getElementById
function $id(id) {
return document.getElementById(id);
}
// output information
function Output(msg) {
var m = $id("messages");
m.innerHTML = msg + m.innerHTML;
}
// file drag hover
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
// file selection
function FileSelectHandler(e) {
// cancel event and hover styling
FileDragHover(e);
// fetch FileList object
var files = e.target.files || e.dataTransfer.files;
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
ParseFile(f);
}
}
// output file information
function ParseFile(file) {
Output(
"<p>File information: <strong>" + file.name +
"</strong> type: <strong>" + file.type +
"</strong> size: <strong>" + file.size +
"</strong> bytes</p>"
);
}
// initialize
function Init() {
var fileselect = $id("fileselect"),
filedrag = $id("filedrag"),
submitbutton = $id("submitbutton");
// file select
fileselect.addEventListener("change", FileSelectHandler, false);
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file drop
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
// remove submit button
submitbutton.style.display = "none";
}
}
// call initialization file
if (window.File && window.FileList && window.FileReader) {
Init(); }
})();

Step:2 Copy and Paste
File Name: styles.css (you must use this filename exactly)
body
{
font-family: "Segoe UI", Tahoma, Helvetica, freesans, sans-serif;
font-size: 90%;
margin: 10px;
color: #333;
background-color: #fff;
}

h1, h2
{
font-size: 1.5em;
font-weight: normal;
}

h2
{
font-size: 1.3em;
}

legend
{
font-weight: bold;
color: #333;
}

#filedrag
{
display: none;
font-weight: bold;
text-align: center;
padding: 1em 0;
margin: 1em 0;
color: #555;
border: 2px dashed #555;
border-radius: 7px;
cursor: default;
}

#filedrag.hover
{
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: inset 0 3px 4px #888;
}

img
{
max-width: 100%;
}

pre
{
width: 95%;
height: 8em;
font-family: monospace;
font-size: 0.9em;
padding: 1px 2px;
margin: 0 0 1em auto;
border: 1px inset #666;
background-color: #eee;
overflow: auto;
}

#messages
{
padding: 0 10px;
margin: 1em 0;
border: 1px solid #999;
}

#progress p
{
display: block;
width: 240px;
padding: 2px 5px;
margin: 2px 0;
border: 1px inset #446;
border-radius: 5px;
background: #eee url("progress.png") 100% 0 repeat-y;
}

#progress p.success
{
background: #0c0 none 0 0 no-repeat;
}

#progress p.failed
{
background: #c00 none 0 0 no-repeat;
}

Step:3 Copy and Paste 
File Name: drag.htm (you can change the filename to anything you like)
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>HTML5 File Drag &amp; Drop API</title>
<link rel="stylesheet" type="text/css" media="all" href="index_files/styles.css">
<style type="text/css" charset="utf-8">/* See license.txt for terms of usage */

/** reset styling **/
.firebugResetStyles {
    z-index: 2147483646 !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    border: 0 none !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    position: fixed !important;
    -moz-transform: rotate(0deg) !important;
    -moz-transform-origin: 50% 50% !important;
    -moz-border-radius: 0 !important;
    -moz-box-shadow: none !important;
    background: transparent none !important;
    pointer-events: none !important;
}
.firebugBlockBackgroundColor {
    background-color: transparent !important;
}
.firebugResetStyles:before, .firebugResetStyles:after {
    content: "" !important;
}
/**actual styling to be modified by firebug theme**/
.firebugCanvas {
    display: none !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBox {
    width: auto !important;
    position: static !important;
}
.firebugLayoutBoxOffset {
    opacity: 0.8 !important;
    position: fixed !important;
}
.firebugLayoutLine {
    opacity: 0.4 !important;
    background-color: #000000 !important;
}
.firebugLayoutLineLeft, .firebugLayoutLineRight {
    width: 1px !important;
    height: 100% !important;
}
.firebugLayoutLineTop, .firebugLayoutLineBottom {
    width: 100% !important;
    height: 1px !important;
}
.firebugLayoutLineTop {
    margin-top: -1px !important;
    border-top: 1px solid #999999 !important;
}
.firebugLayoutLineRight {
    border-right: 1px solid #999999 !important;
}
.firebugLayoutLineBottom {
    border-bottom: 1px solid #999999 !important;
}
.firebugLayoutLineLeft {
    margin-left: -1px !important;
    border-left: 1px solid #999999 !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBoxParent {
    border-top: 0 none !important;
    border-right: 1px dashed #E00 !important;
    border-bottom: 1px dashed #E00 !important;
    border-left: 0 none !important;
    position: fixed !important;
    width: auto !important;
}
.firebugRuler{
    position: absolute !important;
}
.firebugRulerH {
    top: -15px !important;
    left: 0 !important;
    width: 100% !important;
    height: 14px !important;
    border-top: 1px solid #BBBBBB !important;
    border-right: 1px dashed #BBBBBB !important;
    border-bottom: 1px solid #000000 !important;
}
.firebugRulerV {

    top: 0 !important;

    left: -15px !important;

    width: 14px !important;

    height: 100% !important;
     border-left: 1px solid #BBBBBB !important;
    border-right: 1px solid #000000 !important;
    border-bottom: 1px dashed #BBBBBB !important;
}
.overflowRulerX > .firebugRulerV {
    left: 0 !important;
}
.overflowRulerY > .firebugRulerH {

    top: 0 !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.fbProxyElement {
    position: fixed !important;
    pointer-events: auto !important;
}</style></head>
<body>

<h1>HTML5 File Drag &amp; Drop API</h1>

<p>This is a demonstration of the HTML5 drag &amp; drop API which retrieves file information.</p>

<p><a href="http://www.webihawk.com">Web i HawK</a></p>
<form id="upload" action="index.html" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>HTML File Upload</legend>

<input id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" type="hidden">

<div>
<label for="fileselect">Files to upload:</label>
<input id="fileselect" name="fileselect[]" multiple="multiple" type="file">
<div style="display: block;" id="filedrag">or drop files here</div>
</div>

<div style="display: none;" id="submitbutton">
<button type="submit">Upload Files</button>
</div>

</fieldset>

</form>

<div id="messages">
<p>Status Messages</p>
</div>


<h2><script src="index_files/filedrag.js"></script>
</h2>
</body></html>

Read More

Monday, 10 October 2011

Circle Navigation Effect with CSS3

22:35  Unknown  No comments

Today Codrops want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.

Read More

Thursday, 15 September 2011

Why CSS is good for Google

12:40  Unknown  No comments

Cascading Style Sheets (CSS) are used to separate the stylistic elements of a page such as layout, colour and fonts from the content of the page such as paragraphs and images. We call this Separation of Content from Presentation. If you don't understand CSS at all then you may decide not to use it for your site. However I would suggest that the advantages to be gained from using CSS, not just for Google, are well worth the time invested in learning it.


So why is CSS good for Google?

  • CSS allows for smaller file sizes
  • CSS allows you greater control of page structure
  • CSS allows you to hide certain content from browsers while it still gets picked up by Google

CSS allows for smaller file sizes
By taking styles out of the HTML page and putting it into a standalone (imported) style sheet (.css file), you can reduce the overall amount of code in your web pages. Pages with less code have smaller file sizes and Google prefers pages with smaller file sizes (many other search engines do too).

Though Google doesn't offer specific advice on this matter, the search engine optimisation community is generally agreed that 100KB is a good upper limit for page sizes. 

CSS allows you greater control of page structure
CSS allows you to structure your document according to HTML standards without comprimising the look-and-feel of the page.

Google rewards pages that are well structured, though many designers choose to ignore standards and guidelines as much as possible, because they (incorrectly) believe standards lead to bland pages. Using CSS, designers can create attractive pages with much flair.

CSS allows you to hide content from browsers while it still gets picked up by Google
Using CSS you can hide content from certain browsers in certain situations. For example you may have some content that you only want to appear in print, or you may want certain content to only be shown on screen and not in print (such as page navigation). The advantage is that Google will still index all of the content and you will still get the benefit that content brings. 

Browser Compatibility
If you are new to CSS, be aware that different browsers still interpret CSS standards in different ways, while some (very) old browsers don't read CSS at all. Ensure that your CSS is as cross-browser compatible as possible, and that your HTML pages look acceptable even without CSS.

Read More

Monday, 29 August 2011

FREE CSS3 Video Course – 24 hours only

13:27  Unknown  No comments

Think Vitamin have made their entire CSS3 Video Training Course free for 24 hours! That’s 51 free videos and over six hours of free video tutorials. We hope it helps you speed up your learning :)

These are all the topics you can learn…

Borders

  • Border Radius
  • Border Image
  • Basic Box Shadows
  • Advanced Box Shadows

Gradients

  • Linear Gradients in WebKit
  • Linear Gradients in Firefox
  • Radial Gradients in WebKit
  • Radial Gradients in Firefox
  • Additional Syntax

Animation

  • Transitions
  • 2D Transforms
  • 3D Transforms
  • Animations
  • Project: Part 1 and 2

Typography

  • Text Shadows
  • Text Stroke
  • Reflections
  • Overflow and Wrapping
  • Columns
  • @font-face
  • Font Services
  • Complete CSS3 Project: Part 1, 2, 3 and 4

Media Queries

  • Introduction
  • Basic Syntax
  • width and height
  • device-width and device-height
  • orientation, aspect-ratio, and device-aspect-ratio

Selectors

  • Attribute Selectors
  • Pseudo-Classes
  • More Selectors

Backgrounds

  • Multiple Backgrounds
  • Background Sizing
  • Origin and Clip

Read More

CSS3 Generator

12:21  Unknown  No comments

This CSS3 Generator was proudly designed by Eric Hoffman and coded by Peter Funk.

Read More
Twitter Delicious Facebook Digg Stumbleupon Favorites More