May 5, 2012 | CSS |
CSS: Style links depending on file format
A short CSS snippet that changes the styling of external links, email links and links to pdf documents.
/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
Mar 3, 2012 | CSS |
CSS: Drop Caps
Use the first-letter Pseudo-Class
The easiest way to create CSS Drop Caps is to use the first-letter pseudo-element on the element you want to have a drop cap. The problem is, this isn’t supported in all browsers. Be sure to test this in the browsers your Web site supports.
Type the following and place it in a
element at the top of your Web page:
(more…)
Feb 3, 2012 | CSS |
Tucked Corners CSS3
This CSS code will give you the cool ‘tucked corners’ effect that is used on the Gravatar home page.
(more…)
Feb 3, 2012 | CSS |
CSS: How to Create Multiple Borders in CSS3
A cool technique using the box-shadow property that allows you to create multiple borders around an object.
box-shadow:
0 0 0 2px #000,
0 0 0 3px #999,
0 0 0 9px #fa0,
0 0 0 10px #666,
0 0 0 16px #fd0,
0 0 0 18px #000;
Aug 17, 2011 | CSS |
Thank our lucky stars, we CAN override inline styles directly from the stylesheet. Take this example markup:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
We can fight that with this:
div[style] {
background: yellow !important;
}
Jul 13, 2011 | CSS |
div.block-banners img {
opacity: 0.9;
filter:alpha(opacity=90);/******* This line for IE ********/
}
div.block-banners img:hover {
opacity: 1;
filter:alpha(opacity=100);/******* This line for IE ********/
}
Jun 1, 2011 | CSS |
Definition and Usage
The frameborder attribute specifies whether or not to display a border around an iframe.
Browser Support
The frameborder attribute is supported in all major browsers.
Syntax
<iframe frameborder="value">
Attribute Values
1 Border on (this is default)
0 Border off
Example
An iframe with no border:
<iframe src="/default.asp" width="200" height="200" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
Apr 18, 2011 | CSS |
Here is a way to make some CSS rules visible only for Opera (9.5 +)?
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
css rules
}
here is an example:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#ja-main {
width: 800px ;
}
#ja-left {
width: 200px;
}
}
For google chrome
@media screen and (-webkit-min-device-pixel-ratio:0) {
Body {}
}
Dec 23, 2010 | CSS |
CSS3 Generator v1.7
http://css3generator.com/
This site help you to generate CSS3 code such as :
Border Radius
Box Shadow
Text Shadow
RGBA
@Font Face
Multiple Columns
Box Resize
Box Sizing
Outline
Transitions
Transform
Selectors
Gradients
Dec 2, 2010 | CSS, jQuery |
We wrote a script to “equalize” the heights of boxes within the same container and create a tidy grid — with little overhead.
Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. When developing complex web applications or site designs we’ve found that it often makes the most sense from a usability and performance standpoint to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.
(more…)
Recent Comments