How transform Image using CSS/HTML

I want to turn the image full 180 degrees, this is how we CSS can help turn image upside down.

div {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

Flip image via Javascript/CSS?

This is how image can be flipped, like a mirror image

<div id="container" class="flip-vertical">

<h3 class="flip-vertical">vertical flip</h3>
</div>

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}

Remove the AnchorTag Border

I have a AJAX Tab container and in that on selection its giving me a border on the Header Text of the Tab. To remove this using CSS, here is how we can do it

.ajax__tab_inner a.ajax__tab_tab{width:100%;border:0 !important;outline: none; }

a:focus { 
        outline: none; 
    }

This is what will fix the issue. Hope this helps!

Free eBook: Programming Windows 8 Apps with HTML, CSS and JavaScript

You can download the eBook in PDF format here: http://go.microsoft.com/FWLink/?Linkid=270056 (17.9 MB)

EPUB format is here: http://go.microsoft.com/FWLink/?Linkid=272592 (37.3 MB)

MOBI format is here: http://go.microsoft.com/FWLink/?Linkid=272591 (69.5 MB)

 

Happy programming!!

How to Remove Css Style from codebehind?

Here is how we can achieve this from codebhind in c#. Here is the sample code snippet I am here removing CssSytle from DIV but I works for any Control

   1: // Removing Div class when we have only transaction details

   2: divTransactionSummary.Attributes.Add("class", divTransactionSummary.Attributes["class"].ToString().Replace("prodiv", ""));

   3:               

Here “prodiv” is the class of div I have used in my aspx page for this DIV

Hope this helps!!

How to get Line break in a button using HTML and CSS

Some times there are some scenarios where we might put some line breaks in buttons while doing HTML code your pages. There are few different ways that you can achieve this using HTML and CSS.

Here are few code snippets

   1: <!-- Method 1 -->

   2: <input type='submit' value='my \n button'>

   3: <!-- Method 2 Using HTML break-->

   4: <input type='submit' value='my &lt;br> button'> 

   5: <!-- Method 3: Using CSS -->

   6: <input type="submit" value="My button" style="white-space:normal"/>

Hope this helps!!

Tips for Cross Browser Compatibility

Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. There are some things you should consider for Safari and Firefox also, and IE isn’t always the culprit for your CSS woes. Here is a quick summary of How to get Cross Browser Compatibility Every Time:

• Always use strict doctype and standards-compliant HTML/CSS
• Always use a reset at the start of your css
• Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari
• Never resize images in the CSS or HTML
• Check font rendering in every browser. Don’t use Lucida
• Size text as a % in the body, and as em’s throughout
• All layout divs that are floated should include display:inline and overflow:hidden
• Containers should have overflow:auto and trigger hasLayout via a width or height
• Don’t use any fancy CSS3 selectors
• Don’t use transparent PNG’s unless you have loaded the alpha

Help full Tools and Converters

Here are some useful tools and converters which are helpful for conversion and compression

.NET Code converters

You can translate any C# code to VB.NET and VB.NET to C#.

http://converter.telerik.com/

http://www.aspalliance.com/aldotnet/examples/translate.aspx

http://www.developerfusion.com/utilities/convertcsharptovb.aspx

I have used first URL from telerik. Its works just great

Compress your CSS

http://www.developerfusion.com/tools/compresscss/

Compress and obfuscate javascript

http://www.developerfusion.com/tools/compressjavascript/

How to: Javascript Loading Conditionally for IE

Loading Javascript conditionally for IE. When rendering fixes are needed for IE, you can enclose CSS, JavaScript, or HTML markup in conditional comment tags directed at one or more versions of IE with an "if" statement; IE will then execute the code specified within them, while all other browsers treat them as standard comment tags and ignore them. The "if" statement must reference IE in square brackets as shown below; in this example include script only for IE

<!--[if IE]>

    <script type="text/javascript">

        /*  Do Stuff */
    </script>
<![endif]-->

below example shows how to exclude a script block from IE:

<![if !IE]>

    <script type="text/javascript">

        /*  Do Stuff */

    </script>

<![endif]>

Conditional comments can also be targeted to a particular version of IE, or a subset of versions, like those released prior to IE7 or IE6

<!--[if lt IE 7]>

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

<![endif]-->

Hope this helps!