CSS hacks for IE10 & IE11

How to specify CSS hacks for IE10 & IE11 ?

Selector Hacks:

Internet Explorer ≥ 10
_:-ms-input-placeholder, :root .selector {}

Internet Explorer ≥ 11
_:-ms-fullscreen, :root .selector {}

Media Query Hacks:

Internet Explorer ≥ 10
@media screen and (-ms-high-contrast: active), 
(-ms-high-contrast: none) {
/*define styles  here*/
}

TOP 10 ONLINE RESOURCES OF WEB DESIGNING TRAINING

TOP 10 ONLINE RESOURCES OF WEB DESIGNING TRAINING

I found high-quality web design training, tutorials about HTML, CSS, HTML5, CSS3, JavaScript, Jquery on these sites. I feel these sites are the top 10 online training resources for web design. 

1.W3 Schools:

2. Google Code University

03. Treehouse

A better way to learn technology
From zero experience to job-ready

The extensive Treehouse library of step-by-step video courses and training exercises will give you a wide range of competitive, in-demand technology skills that will help you land your next dream job or build your startup idea. No experience? No problem!

04. Lynda.com

Learn software, creative, and business skills

• • High-quality, professional video production
• • Engaging instructors, carefully chosen for their expertise
• • Anywhere learning on Macs, PCs, tablets, and smartphones
• • Unlimited access to all 1,574 courses (more added every week)

05. Opera Web Standard Curriculum

The web standards curriculum has been donated to the W3C web education community group, to become part of a much bigger educational resource. It is constantly being updated so that it remains current with modern web design practices and technologies. To find the most up-to-date web standards curriculum, visit the web education community group Wiki. Please make changes to this Wiki yourself, or suggest changes to Chris Mills, who is also the chair of the web education community group.

06. Don't Fear the Internet

Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because you’ve been waiting two years for your cousin to put it together for you? Well, we’re here to help. We know that you have little to no desire to do web design professionally, but that doesn’t mean that you want an ugly cookie-cutter site or to settle for one that hasn't been updated since Hackerswas in theaters.

07. netmagazine.com

.net is the world's best-selling magazine for web designers and developers. Each issue boasts a wealth of expert tips and advice, including over 30 pages of advanced step-by-step tutorials on subjects as diverse as CSS, HTML, JavaScript, web graphics and Flash. You'll also find in-depth features, not to mention interviews where major industry players impart their wisdom. If you're serious about web design or development, then .net is the magazine for you.

08. Mozilla School of Webcraft

At P2PU, people work together to learn a particular topic by completing tasks, assessing individual and group work, and providing constructive feedback.

P2PU is a different kind of learning experience–knowledge isn’t transmitted, broadcast, or transferred. Instead, learning evolves by working together on projects, sharing with each other, giving each other feedback, and iterating to improve. 

Backed by Mozilla

Mozilla's mission is to keep the web open, and to enable anyone to take part in building it's future. In School of Webcraft you can earn badges backed by Mozilla, that highlight your technical and community skills to your friends, colleagues and potential employers. School of Webcraft Badges are easy to display on your personal website, online profiles, and CV and use the Open Badges framework, a way to record, track, and display your skills and knowledge across the web.

09. Smashing Magazine

Founded in September 2006, Smashing Magazine delivers useful and innovative information to Web designers and developers. Our aim is to inform our readers about the latest trends and techniques in Web development. We try to persuade you not with the quantity, but with the quality of the information we present. Smashing Magazine is, and always has been, independent.

10. Codecademy

Codecademy is a team of hackers working hard to build a better way for anyone to teach, and learn, how to code. We're determined to succeed in realizing our mission to turn a world of tech consumers into one of empowered builders.

Keywords:
Top 10 Online Resources of Web Designing
Web Designing Online Training
Free Web Design Training
Best Resources for Web Design Online Training
Excellent Resources for Web Design Video Tutorials

How to wrap long lines without spaces in HTML? "word-wrap:normal | break-word;"

How to wrap long lines without spaces in HTML?

How to break long urls without spaces in span?

WORD WRAP CSS:

word-wrap: normal | break-word

Syntax

word-wrap: normal|break-word;

Description:

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

Examples

div { word-wrap: break-word }
<div style=”word-wrap: break-word”>Here is some content for the div element</div>

Value	Description
normal	Break words only at allowed break points
break-word	Allows unbreakable words to be broken

Javascript Syntax:

object.style.wordWrap="break-word"

Example

Issue in ie ?  Issue with SPAN tag ? Anchor tag?

Add display :block; property to style to fix the ISSUE:: ENJOY..

Reference: http://www.css3.com/css-word-wrap/

http://www.css3.com/css-word-wrap/

"viewport" meta tag to control layout on mobile devices

"viewport" meta tag to control layout on mobile devices

<meta name="viewport" content="width=device-width">

General Use of Viewport Tag
Viewport meta tag is generally used for responsive web design to set the viewport width and initial-scale on mobile devices.

The viewport is the logical window in which a web page is designed. We can set the width, height, and initial scale of the viewport for a web page using the viewport property in an HTML <meta> tag.

We can add viewport meta tag in Head tag like this:

<!doctype html>
<html>
<head>
  <title>Hello world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
  <p>Responsive Web Design!</p>
</body>
</html>

Know about Viewport Metatag basics: 
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

viewport meta tag supports a handful of other properties for the "content" attribute:

viewport meta tag "content" property attributes

Property	Description
width	The width of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword "device-width" to set the viewport to the physical width of the device's screen.
height	The height of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword "device-height" to set the viewport to the physical height of the device's screen.
initial-scale	The initial zoom of the webpage, where a value of 1.0 means no zoom.
minimum-scale	The minimum level the user is able to zoom out of a webpage, where a value of 1.0 means the user isn't able to at all.
maximum-scale	The maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn't able to at all.
user-scalable	Sets whether the user can zoom in and out of a webpage. Set to yes or no.

When optimizing a webpage for mobile devices, the first step is to add the viewport meta tag to the HEAD section of your page, so that mobile devices refrain from making changes to the zoom level of the webpage unilaterally. In most cases you'll simply want to set the meta tag's content property to "width=device-width", so that no scaling of the page occurs at all, and your CSS media queries will return the actual dimensions of the device, not the "zoomed out" version's. To also prevent the device from zooming in on a webpage when its orientation has been changed from portrait to landscape and visa versa, you can also throw in an initial-scale and maximum-scale property and limit both of them to 1:

Webpage rendering at 100% and Scaling Not working for Your web page in Mobile Device ?? 

Here is a solution : 

Generally we make a Common Mistake in Adding Viewport tag:

A common mistake is that people often apply initial-scale=1 on non-responsive design. It will make the page render at 100% without scaling. If design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. It will disable the scaling and zooming capability of site. With scaling disabled, users have no way to zoom out to see the complete page. 

Note: if design is not responsive, do not reset the initial-scale or disable scaling!

Keywords:
viewport meta tag to control layout on mobile devices
viewport meta tag Tutorial
viewport meta tag- the key to preparing a page for mobile devices optimization
Webpage rendering at 100% and Scaling Not working for Your web page in Mobile Device ?? 
How to fix Webpage Scaling issue in Mobile  device?
Zooming capability of webpage disabled??

Reference urls:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml 

Rounded Corners with CSS (With No Images)

Rounded Corners with CSS (With No Images)
Rounded corner CSS without images
Rounded Corners:
CSS Rounded Corners for Mozilla Firefox
CSS Rounded Corners for -WEBKIT BROWSERS

Standard: CSS : 

CSS for Standard Corners:

.class {

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px; 

-khtml-border-radius: 15px; /* for old Konqueror browsers */ 

}

CSS for Individual Corners:

.class {

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 25px;

-moz-border-radius-bottomright: 35px;

-moz-border-radius-bottomleft: 0;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 25px;

-webkit-border-bottom-right-radius: 35px;

-webkit-border-bottom-left-radius: 0;

border-top-left-radius: 15px;

border-top-right-radius: 25px;

border-bottom-right-radius: 35px;

border-bottom-left-radius: 0;

}

Short CSS for Rounded Corners:

-moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]

Example:  -moz-border-radius: 15px 25px 35px 0;

(Firefox 3.5+):

-moz-border-radius-topleft: [horizontal radius] [vertical radius];

Example: -moz-border-radius-topleft: 10px 40px;

We can write like this also 

-moz-border-radius-topleft: 15px 20px;

-moz-border-radius-topright: 25px 35px;

-moz-border-radius-bottomright: 35px 40px;

-moz-border-radius-bottomleft: 45px 65px;

CSS FOR WebKit Elliptical Rounding

All corners:

-webkit-border-radius: 33px 11px;

LEFTcorners only:

-webkit-border-top-left-radius: 52px 32px; 

-webkit-border-bottom-left-radius: 52px 32px;

Reference URL

Print Style Sheet : What is Print Style Sheet ? How to Set up Print Style sheet ?

Print Style Sheet : What is Print Style Sheet ? How to Set up Print Style sheet ?

What is Print Style Sheet ?

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we're left with web pages that frustratingly don't properly print on to paper.

How to set up Print Style sheet ?

The best method is to start from scratch and rely on the default style sheet of the browser, which takes care of the printed output pretty well by default. In this case, insert all declarations for printing at the end of your main style sheet, and enclose them with this distinct rule:

@media print {
   …
}







For this we have to do two things 

1. Include all screen styles in the separate @media screen {…} rule;
2. Omit the media type for the condensed style sheet: 
<link rel="stylesheet" href="css/style.css"/>

or we can write like this :

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

 Now ready to add print style sheet ? Thinking about how to write styles?? 
Check the below example: 

   * Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}

/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}

Every thing done, Still have an issue with printing background colors  & Images ?
Here is the solution :

How to get Background Colors & Images in Pirnt ? 
How to get Background Colors & Images in Print pdf file created in Chrome ? 

It's simple,

Add 
"-webkit-print-color-adjust:exact; " property in body styles.

Ex:
body {background-color:#fff; font-family:arial; font-size:15px; background:white; -webkit-print-color-adjust:exact; } 

 

HTML5: The figure & figcaption elements

HTML5: The figure & figcaption elements

Definition and Usage

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

The <figure> tag also supports the Global & Event Attributes in HTML5.

The <figure> element

W3C Says :

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.


The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things). The spec says this about <figure>:
 

The <figcaption> element

 W3C Says :

The figcaption element represents a caption or legend for a figure.

The <figcaption> element is optional and can appear before or after the content within the <figure>. Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements (e.g., <img> or <code>). 

Using <figure> and <figcaption>

Want to know how to use ?? Code Examples?

<figure>
  <img src="/image-name.jpg" alt="Figue Example display">
</figure>

Figure with caption Like :

<figure>
  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>Lorem Ipsum starts form here. Dummy text. <a href="http://www.google.coml">Google</a></figcaption>
</figure> 

Multiple Images with Caption :

<figure>
  <img src="/image1.jpg" alt="Kooaburra">
  <img src="/iamge2.jpg" alt="Pelican stood on the beach">
  <img src="/image3.jpg" alt="Cheeky looking Rainbow Lorikeet">
  <figcaption>Signle Caption for multiple Images <a href="http://www.google.com">Fig Caption</a></figcaption>
</figure> 

Differences between <figure> and <aside>

If the content is simply related and not essential, use <aside>.
If the content is essential but its position in the flow of content isn’t important, use <figure>. 

Text Source:

W3schols, W3C,