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

Using CSS Selection Pseudo-element to change the Default Selection Style of your WebPage

CSS Pseduo-elements allow you to style certain parts of a document. In this article, we will see how to change the default selection style of your web page contents using ::Selection PseudoElement.

Although you can use any webeditor of your choice, I am using Visual Studio 2013 for this demonstration. Let’s start by creating a new ASP.NET Web application. Start Visual Studio and click on New Project. Choose the Web Category and choose ASP.NET Web Application as shown below –

crtwebapp
Continue Reading >>
Posted by No comments:

HTML5 Picture Element for Responsive Images

In this article, we will look at the <picture> element and how it helps in responsive design to render images of different sizes, based on the physical device accessing the content.

To display an image in our HTML pages, we have so far made use of the <img/> element with the source [src] attribute. Here’s an example:

<img src="Images/default.png" alt="Default Logo" />

With varying screen sizes and pixels, handling this image becomes a challenge. Let's create a small example for demonstrating this. I am using the free Visual Studio Community Edition although you can use any other web editor of your choice. Create an empty web application and add a HTML page with the name TestPicture.html in our project. Add the following code:
Continue Reading >>
Posted by No comments:

Remove Vertical Scrollbars in SyntaxHighlighter

SyntaxHighlighter created by Alex Gorbatchev is a code syntax highlighter developed in JavaScript. It basically makes your code snippets beautiful.

Many a times even when not required, a vertical scroll gets added to your code as shown here:

syntax-highlighter-scroll

The scroll appears in some browsers (especially Chrome) as the default style set in shCoreDefault.css is overflow: auto. If you do not want a vertical scrollbar, you can always do this:
Continue Reading >>
Posted by No comments:

3D Transform using CSS3 and jQuery Animation

In this article, we will see how to use CSS3 3D transform with jQuery animate method. To start with, CSS3 supports some new features like –

1. CSS3 Selectors.
2. Rounded Corners.
3. Background Decoration.
4. Colors – [Linear Gradients/Radial Gradients].
5. Text Effects.
6. 2D and 3D Transforms.
7. Animations and many more.

Out of these features, in this article, we will look at 3D transform with jQuery animation. Let’s start by creating an empty web application using Visual Studio with the name “QuarterSalesDetails”. For this demonstration, I am using Visual Studio 2013 although you can use a previous edition of Visual Studio too.

Once you click on the OK button, you will see a New ASP.NET Project dialog box where you can choose your own web template based on your develop environment and requirements in your organization. The dialog box is shown below. Please make a choice of Web Forms for this demonstration.
Continue Reading >>
Posted by 2 comments:

HTML5 and CSS 3 in ASP.NET 4.5 – Part 1

In the first part of ‘HTML5 and CSS 3 in ASP.NET 4.5’ article, we will see how HTML5 is supported in ASP.NET 4.5. We will also explore some new features of HTML5 with ASP.NET 4.5.
ASP.NET 4.5 by default supports HTML5. To see this in action, let’s create a new empty web site with the name “HTML5SupportPartI” using Visual Studio 2012 as shown below –

For this demonstration I am using Windows – 8 and Visual Studio 2012.

newemptysite

Add a new item to our blank web site which is “Web Form”. I am using the default name of the page which is “Default.aspx”. Once you have added the “Default.aspx” page, observe the “DOCTYPE” in our page. It looks like below –
Continue Reading >>
Posted by 2 comments:

Most Popular .NET, jQuery and Web Development articles in 2011

With 2012 fast approaching and 2011 drawing to an end, we've put together our list of the Most Popular .NET articles on DevCurry.com this year. The year 2011 featured articles on DevCurry covering many technologies like jQuery, HTML 5, ASP.NET, MVC, Silverlight, WPF, .NET, VS 2010, Entity Framework and Sharepoint, just to name a few.

I would like to thank each one of you who has visited my blog or contributed to it by submitting a Guest post, Subscribing to RSS Feed, by joining me on Twitter or the Facebook page or promoting the articles and giving regular feedbacks via rating, comments or Emails. Many thanks to those too who purchased my jQuery ASP.NET eBook.

Here are some articles that were liked the most by readers like you. Have a very Happy New Year 2012!

.NET Articles


jQuery & JavaScript Articles


HTML 5 & CSS Articles

Posted by 6 comments:

Create Triangles using Plain CSS and No Images

If someone asks you to create a graphic on a webpage using four triangles in a Square, how would you suggest he/she goes about it? Use JavaScript or Images?

image

I recently picked up a nice CSS trick from Paul (CSS guru) who told me how to achieve the above output using pure CSS. Here’s the code

image

CSS code:

#one{
height:0;
width:0;
border-top:80px solid #FFFF01;
border-left:80px solid #00FF00;
border-right:80px solid #0080FF;
border-bottom:80px solid #FE0002;
margin:20px;
}

and voila! You have your artwork! As you can see, by using simple CSS properties such as border, you can produce complex shapes and orientations without using JavaScript or Images

See a Live Demo
Posted by 1 comment:

CSS3 Code Generation Tools That Save Time

One of the challenges faced by designers is to implement cross-browser properties while designing sites. The extra bit of code to accommodate properties that are browser-specific, can take up a lot of time. CSS3 Code Generators can help you save time and reduce errors, by generating code that works across different browsers. In this article, I will list six very useful CSS3 Code Generators.

CSS3 Please

CSS3Please is an effective cross-browser CSS3 Rule Generator that provides a live preview while you edit the values in this css file. The best part is that you don't have to worry about making sure the corresponding values match, as the generator does that automagically for you.

image

CSS3 Generator

A set of CSS properties that can be generated using sliders and changes can be previewed live.

image

CSS3 Generator 

Allows you to generate CSS for various CSS Properties like Border Radius, Box Shadow, RGBA, @Font Face etc.

image

CSS3 Sandbox

A set of tools that lets you generate Gradients, Shadows, CSS Transforms and CSS Text Strokes

image

Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor and supports most browsers.

image

Button Maker

Creates beautiful buttons by specifying properties like Gradient, Border, Background, Text Color and Font.

image
Posted by 2 comments:

CSS: after and before Pseudo Elements

CSS Pseudo Elements are useful for adding special effects to selectors, which would be difficult to achieve if we were to use real markup. For eg: styling of the first letter or first line of a paragraph. In a previous article, I had introduced the CSS First-Letter First-Line Pseudo Elements. In this article, we will take a quick overview of two more pseudo elements: ::after and ::before

Note: Pseudo elements are not new to CSS3. They were introduced in CSS2. In CSS3, you use double colon (::) for pseudo elements to differentiate them with pseudo classes.

The ::after and ::before pseudo elements are used to apply styles and generate content and insert it at the beginning and end of existing elements.

::before Pseudo Element

For e.g: Let us see how to insert text in front of every list item <li>. In this example, we are inserting text ‘Bakery Item’ in front of each <li> element.

Let us first declare an unordered list as shown below:

image

Now use the ::before pseudo element to add the text ‘Bakery Item’ to each li element

<head>
<title>after and before pseudo elements - DevCurry.com</title>
<style type="text/css">
 ul.bake li:before 
 {
  content: "Bakery Item: "; 
  font-style:italic;
 }
</style>
</head>

OUTPUT
before pseudo element

::after Pseudo Element
Similarly, let us say we want to add an image after each list item, like a green arrow that indicates that the item is available. Here’s how to do this using the ::after pseudo element. I have kept an image called ‘yes.jpg’ in the same folder as that of the html file
<head>
<title>after and before pseudo elements - DevCurry.com</title>
<style type="text/css">
  ul.bake li:before 
  {
    content: "Bakery Item: "; 
    font-style:italic;
  }

  ul.bake li:after
  {
    content: " " url("yes.jpg");
  }
</style>
</head>

OUTPUT
after pseudo element
Posted by 1 comment:

JavaScript, CSS3, Silverlight, ASP.NET, SharePoint articles Link List – July 2011

Here’s a quick wrap up of JavaScript, CSS3, Silverlight, ASP.NET, SharePoint and other .NET articles published on DevCurry.com in the month of July 2011.

jQuery, JavaScript and CSS Articles

jQuery: Load Page in a Div - Loading an external page in a div using jQuery is as simple as calling thejQuery Load method.

JavaScript: View Source code without Comments - One my clients had a requirement of viewing an object while debugging, and they wanted to view only the source code, without comments.

Array Shuffle in JavaScript - I have yet to find a script that truly does a random shuffle across all browsers using JavaScript (no frameworks). However there are a couple of scripts I use, that are ‘good-enough’ to be used when an Array has to be shuffled.

JavaScript Object can have Private Methods - I was watching a JavaScript video tutorial by Douglas Crockford where he explained private members in JavaScript. Although there are no ‘private methods’ in a JavaScript object, we can easily create something similar by defining a function variable with a local scope.

Unary plus operator in JavaScript - The unary plus (+) operator is a unary operator and converts its operand to a number, if it isn’t already. It is equivalent to the Number() constructor called as a function. Let us see some examples of the Unary + operator and what does it imply in different scenarios

Upside Down Text with CSS3 - When it comes to rotating, tilting or scaling text, you would normally rely on JavaScript or images laid on top of each other, to give that effect. However with the CSS3 transformation functions, you can do all of this without any JavaScript code

JavaScript: Convert CamelCase to Dashes and vice-versa - My colleague Satyam shared a nice piece of JavaScript code that converts a camelcase to dashes and dashes to Camelcase.

Text Shadow Filter in IE -  You can drop shadows to text using the text-shadow property which was re-introduced in CSS3.

Conditional CSS and JavaScript for Different Browsers - A common technique adopted by developers is to detect browsers and conditionally differentiate CSS rules and JavaScript for specific versions of browsers. In simple words, a requirement could be that if the browser is IE, use a different set of CSS and JavaScript files.

Free Photo Editors for Web Designers - A good photo editing software comes with a price, but here are some free open source photo editors that could do the job for you!

Swap Variables in JavaScript – Different Methods - Here are some different ways to swap variable values in JavaScript. I will show swapping using a temporary variable, without a temporary variable, XOR operator and a single line swap.

ASP.NET, MVC and Silverlight articles

ASP.NET MVC 3 Documentation Available in 10 Different Languages - As you probably know that localized versions of ASP.NET MVC 3 is available in 9 different languages via the Web Platform Installer. To supplement these releases, Phil Haack recently announced on his blog that now apart from English, the MVC 3 Documentation is also now available in these nine local languages

Silverlight 4: Consuming WCF REST Service using JSON - A nice feature of WCF programming is the support for REST and JSON, using which a client can communicate with the WCF service without using A proxy. In this article, I have used a Silverlight 4 client application to make a call to WCF service using JSON.

Silverlight 4.0 : Open .Exe Files using COM Interoperability - While working with Silverlight Line of Business applications, there may be a scenario where the user wants to open .exe applications e.g. Notepad or Calculator from the local machine. The question here is how to make this possible in Silverlight?

Silverlight 4 and 5 Tutorials–Link List - I recently published a list of Silverlight 4 and Silverlight 5 Tutorials that should be a useful resource for every Silverlight developer out there. 

ASP.NET: Accessing Nested Repeater Control - The ASP.NET Repeater control is a handy data-bound list control that allows you to create a custom layout by repeating a specified template for each item displayed in the list. You can nest a repeater control inside the other to create advanced layouts.

ASP.NET MVC Web Matrix & Razor Tutorials - In this list, we will see some articles written by our authors on WebMatrix and Razor syntax

Silverlight TextBox Numeric Validation - Although we have IDataErrorInfo interface for input data validation in Silverlight, it provides us validation error when the user enters the data and leaves the textbox. However the requirement we are talking about is when the user enters any data in the textbox, it should be automatically validated. This article contains the solution to this requirement.

.NET and SharePoint Articles

Windows Communication Foundation WCF 4.0 Tutorials - Author and Trainer Mahesh Sabnis has been writing some in-depth WCF 4.0 tutorials that I thought of sharing with all my blog readers. This tutorial series covers some basics and advanced concepts of WCF 4.0 programming

SharePoint 2010 Service Pack 1 Released - Microsoft recently released Service Pack 1 for SharePoint 2010 and Office Products.

SharePoint 2010 Content Database and Other Data Storage Changes - Microsoft recently announced some nice changes to SharePoint 2010 Data storage limits

"Partially Succeeded" TFS status in Visual Studio while upgrading to TFS 2010 - While upgrading from TFS to TFS 2010 and to TFS Team Build 2010, you may have come across the ‘partially succeeded’ message.

C#: Find Previous Month's First and Last Day - Here’s a simple query that gives you the first and last day of the previous month

WCF 4.0 : Discoverable Service - In this small article, I have explained the WCF 4.0 Discovery feature. This feature is used when the location of the service gets changed e.g. changing in the hosting environment or changing the physical address of the server etc

SharePoint 2010 and Azure Free Training - If you are a developer/architect who is interested in understanding how SharePoint 2010 and Windows Azure can leverage each other, then Microsoft recently released the July 2011 update of SharePoint 2010 & Windows Azure Training Kit.

Other Articles

Awarded the MVP Title – 4 Years in a Row - I was awarded the Microsoft MVP title again for the 4th consecutive year, and I thank Microsoft for bestowing this award on me.

BizTalk Server 2010 Training Kit and VHD - Microsoft has released the BizTalk Server 2010 pre-configured VHD and Training Kit to help you get started with BizTalk.

Create Social Games in Windows Azure - I recently stumbled upon the Windows Azure Toolkit for Social Games that includes accelerators, libraries, developer tools, and samples that can be used in games created using .NET or HTML5. The goal is to let game developers focus on development instead of operational hurdles.

Entity Framework 4.1 Update - If you are using Entity Framework to create data access applications, then there’s a new update to Entity Framework 4.1. EF 4.1 was announced in April. Microsoft has just released EF 4.1 Update 1 to fix some bugs as well as introduced some new types.

Visual Studio LightSwitch 2011 RTM Trial - Microsoft recently released the Visual Studio LightSwitch 2011 RTM. This tool is available for free to MSDN subscribers. However those who are not MSDN subscribers can download the RTM trial for 30 days.
Posted by 1 comment:

Text Shadow Filter in IE

You can drop shadows to text using the text-shadow property which was re-introduced in CSS3. The syntax goes as:

.divOne { text-shadow: 3px 4px #666; }

which adds a drop shadow hex code #666 3px to the right and 4px down from the original text. However text-shadow works on only Firefox, Opera and WebKit browsers. It is not supported in IE.

In IE 5.5+ you have to use DXImageTransform.Microsoft.Shadow which creates the illusion of a shadow. Here’s how to use it

IE Shadow Filter

You can also use the Shadow Filter app to achieve the desired effect. It creates CSS markup for you based on the selected values

IE Shadow Filter

Note: In IE9, this feature has been deprecated and the effect of this filter can only be viewed and not printed.
Posted by 1 comment:

Upside Down Text with CSS3

When it comes to rotating, tilting or scaling text, you would normally rely on JavaScript or images laid on top of each other, to give that effect. However with the CSS3 transformation functions, you can do all of this without any JavaScript code. Although you can use CSS relative/absolute positioning and achieve some of these effects, CSS3 transforms gives you flexibility and more control. For example if you were to move an element using relative position, you had to do it against the current element or one of its parent. However with CSS3 transforms, you can position it relative to its current position.

Note: CSS3 transforms is supported in IE9 and above, Firefox 3.5 and above, Opera 10.5, Chrome 1 and above (WebKit 3.2+). W3C accepted the 2D Transformation module (adapted from SVG) proposed by the WebKit team a couple of years ago. Using this module , elements could be rotated, skewed, resized etc.

In this post, we will see a simple example of using CSS3 rotate transform to turn text upside down. We will be using the rotate() function which is the simplest of all CSS3 transform function and does what it names suggests – it rotates the element around a point.

Here’s some CSS code:

<title>Turn Text Upside Down - DevCurry.com</title>
<style type="text/css">
#divOne 
{
  -moz-transform:rotate(-180deg); /* Firefox */
  -webkit-transform:rotate(-180deg); /* Webkit */        
  -ms-transform:rotate(-180deg); /* IE */
  -o-transform:rotate(-180deg); /* Opera */
  transform:rotate(-180deg); /* future */
  position:absolute;
}    
</style>

As you can see, all the major browsers have implemented the rotate property. Each has its proprietary prefix. As you can observe, we have used negative value here and that’s what rotates the text upside down. So –30 degrees is equivalent to 330 degrees and so on.

The text we are rotating here is 'DevCurry.com' kept in a div called 'divOne'.

OUTPUT
CSS3 Rotate Upside down
Note: You can use the“text-gravity: inverse" style too, but that uses the UTF-8 character generator to turn text upside down.
Posted by 2 comments:

CSS First-Letter First-Line Pseudo Elements

CSS Pseudo Elements are used to modify and add special effects to some selectors. For example to modify the first line or letter of a paragraph, you can use the :first-line and :first-letter pseudo elements. You can either increase the font size or even apply an image if you wish.

Let’s see how to use the :first-letter and :first-line pseudo elements and give a nice effect to your first paragraph:

<head>
<title>CSS Psuedo Elements first-letter and first-line
(from DevCurry.com)</title> 
<style type="text/css">
.lor:first-letter {
font-size: 2em;
}
.lor:first-line {
color:Blue;
font-style: italic;        
}
</style>   
</head>
<body>
<p class="lor">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod  tempor incididunt ut labore et 
dolore magna liqua.
</p>
<p>
Neque porro quisquam est qui dolorem ipsum quia
dolor sit amet, consectetur, adipisci velit
</p>
</body>
</html>

If you observe, the first para is decorated with the ‘lor’ class. The :first-letter increases the font size of the first letter in the paragraph, in our case ‘L’. The :first-line adds a blue font color and changes the text to italics. The result is as shown below:
CSS Pseudo Elements
Posted by No comments:

Remove Border Around Images using CSS

Putting an image inside a link adds a border to it. This is usually done to visually indicate to the user that this image is a link. Check this example:

<body>
   <a href="http://www.dotnetcurry.com">
    <img alt="progress" src="images/abc.jpg" />
   </a>
</body>

image

If you have a requirement to override this behavior, then here’s how to do so:

<style type="text/css">
    img
    { 
        border-style: none;
    }
</style>

Now when you view the same image, it is displayed without a border

image

Posted by No comments:

How to Center a Table inside a Div using CSS

If you have been looking for a simple way to center a table inside a div, then here it is

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    #divOne
    {
        width:400px;
        text-align:center;
        border:dotted 1px black;
    }
   
    #tblOne
    {
        width:200px;
        margin:0 auto;       
        border: solid 1px black;
    }
   
    </style>
</head>
<body>
    <div id="divOne">
        <table id="tblOne">
            <tr>
                <td>R1C1</td>
                <td>R1C2</td>
                <td>R1C3</td>
            </tr>
            <tr>
                <td>R2C1</td>
                <td>R2C2</td>
                <td>R2C3</td>
            </tr>           
        </table>
    </div>
</body>
</html>

I have seen lot of people missing out on the margin:auto property. Setting margin to auto is the correct way to center a table and works in ‘most’ of the browsers. The border is just for illustration purposes and is not required.

OUTPUT

image

Posted by No comments:

Change the Color of Hyperlink inside a Container Using CSS

A user recently asked me if it was possible to change the color of hyperlinks placed in a container, instead of changing the hyperlink color of the entire page. Here’s a simple solution to change the hyperlink color only inside divOne:

#divOne a:link
{
    color:White;
}

#divOne a:visited
{
    color:White;
}

#divOne a:hover
{
    color:Black;
}

Similarly if you want to change hyperlink color nested in containers; for eg: a hyperlink kept inside a table inside divOne, use this:

#divOne table a:link
{
    color:White;
}
Posted by No comments:

7 Free Tools to Minify your Scripts and CSS

I have been doing a lot of Client-Side development recently and I have found these 7 tools of great help to improve the performance of the website by ‘shrinking’ the size of JavaScript and CSS files, referenced in the site.

JSMin (JavaScript Minifier) - removes comments and unnecessary whitespace from JavaScript files

JSO (JavaScript Optimizer) - allows you to manage your JavaScript and CSS resources and to reduce the amount of data transfered between the server and the client.

Packer – An online JavaScript Compressor

JSCompress.com – Online tool that uses either JSMin or Packer to compress your files

CSS Compressor – Online tool that compresses your CSS file

DigitalOverload JavaScript Minifier – Online tool that minifies your JavaScript files and finally the one I use most frequently:

YUI Compressor – A JavaScript minifier designed to be 100% safe and yields a higher compression ratio than most other tools.

Posted by 13 comments:

How to Print only Text using CSS

I was recently asked a question of the forums of how to send text only data to a printer. Well it’s not as hard as you think. The <link> tag has an attribute called media. One of the values is called print, which means the style sheet will only be applied when you print the document. You can use this to hide images when you print. Create a new style sheet (print.css) and add the following to it:

img
{
    display:none;
}

Then in your page, all you need to do is reference that style sheet, and it will only be used when you print.

<head>
    <title>Print Text Only Using CSS</title>
    <link rel="Stylesheet" media="print" href="print.css" />
</head>
<body>
    <img src="http://www.google.com.au/intl/en_au/images/logo.gif"
        alt="Google" />
    <p>Faucibus non sit amet elit. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Integer placerat, dui sed
    posuere molestie, urna sapien porta purus, vel sodales ante
    erat sed arcu. Nunc semper, diam ut blandit elementum,
    ipsum purus vestibulum quam, sit amet auctor est nunc ut
    risus. Maecenas vitae justo sit amet erat congue aliquet
    molestie commodo odio. Praesent tempor pellentesque nibh.</p>
</body>

The code above is a small HTML page that displays Google’s logo and well as some sample text. When you print this, the image won’t be displayed. You can also do other stuff like changing the font size, font color for print only. This is a very useful thing to know.

Posted by No comments:

Prevent a Dotted Border around a Hyperlink when clicked in FireFox

I recently got bumped with a strange Link behavior. A user had a hyperlink which opened in a new page. When she clicked on it, a dotted border appeared around the Hyperlink as shown below:

image

I had seen this behavior a couple of times in the past but never thought of a solution until now. After trying a couple of solutions, what worked out was adding the following CSS to the page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Remove Dotted Border in FireFox</title>
    <style type="text/css">
        a:focus {
            outline: none;
        }
    </style>
</head>
<body>
<a href="#" id="anchor1">Click Here</a>
</body>
</html>

I have tested the solution in Firefox 3.0 and above and after adding the CSS, the dotted border does not appear anymore when the link is clicked

image

Posted by 10 comments:

Aligning Multiple DIV’s using CSS

A very frequently asked question is how to align Multiple DIV’s using CSS. I had recently done a post on Aligning two div's next to each other using CSS

Here’s how to align multiple DIV’s. For simplicity sake, I will aligning 3 DIV’s

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Aligning Multiple DIV's using CSS</title>
    <style type="text/css">
    .divOuter{
        display:inline;
        text-align:center;
    }

    .divInner1, .divInner2, .divInner3{
        border: 1px solid;
        float:left;
        width:150px;
        height:150px;
        margin-left:3px;
        margin-right:3px;
    }
    </style>
</head>
<body>
<div class='divOuter'>
    <div class='divInner1'>First DIV</div>
    <div class='divInner2'>Second DIV</div>
    <div class='divInner3'>Third DIV</div>
</div>
</body>
</html>


OUTPUT

image

Posted by 8 comments:
Subscribe to: Posts (Atom)