Here is a rough proof of concept demo I created to show the CSS3 transform property.
-
Recommended Books
- Blogroll
Categories
Archives
J.P. McGarrity.com Focusing on the Front End
-
CSS Transform Tool
March 3, 2011 by J.P.Category: CSS 3, css/html, css/xhtml, jqueryComments (0)
-
Pseudo Elements :before and :after with CSS 2.1
by J.P.Here is a quick example of how to use Pseudo elements “:before” and “:after” with css.
li{
display:block;
}
li:before{
content:"This is red from :before";
color:red;
}
li:after{
content:"This is blue from after";
color:blue;
}Category: coding, css 2.1, css/html, css/xhtmlComments (0)
-
Advanced CSS Attribute Selector Demo
March 14, 2010 by J.P.Recently a back end developer asked me with there was a way to use a wild card in CSS that would allow him to generate ID’s on the fly. The solution I came up with was to use an attribute selector.
When using attribute selectors in CSS the name before the “|” is the attribute targeted. In this case “id” is used but we could have just as easily used “rel”, “input”, “value” etc.
The text after the “|” is what the attribute must start with to be read. The example uses “section”. Each “id” in the html that starts with “section” will be styled. Some id’s use more specific code in certain div’s to give them unique colors showing how the cascading works in the CSS file.
Here is the solution:
CSS Code
[id|="section"]{
border: 10px solid #999;
margin:10px 0;
background:black;
width: 200px;
height: 200px;
}
[id|="section-item"]{
background:green;
}
#section-1{
background:red;
}
#section-2{
background:blue;
}
#section-3{
background:yellow;
}Category: CSS 3, css/xhtmlTags: Attribute selectors, css | Comments (0)
-
Font CSS Substitution Methods
September 2, 2009 by J.P.
Many new methods of font substitution are coming of the wood work and old methods are now getting a second look.
@font-face method
The @font-face method was added to the CSS2 spec but then not recommended in CSS2.1. However with CSS3 it’s back and supported by most popular modern browsers. Read about @font-face at W3.org.
This method requires the font being loaded on the server and will cause a slight flickering of the font rendering while it is stored in the cache. The plus side of this method is it’s easy to implement and requires no JavaScript.
Here is an example of @font-face being used. Click Here
Sample CSS code used (Note: font is stored on the server)
@font-face {
font-family: 'BrushScript';
src: url('BrushScript.ttf') format("truetypefont");
}
/* for IE */
@font-face {
font-family: 'BrushScript';
src: url(BrushScript.ttf);
}
body {
font-family: 'BrushScript', helvetica; /*degrades to a standard web font if unavailable */
font-size:1em;
}Cufon JavaScript Method
This currently my personal favorite method. No font is stored on the server and there is no flicker of the font while loading. The wizard also provides many options and settings so you can customize the needs for your site.
Easy to add
Cufon provides a simple method for converting fonts on your local machine into a js file that you include in the header along with the Cufon script. A simple replace call is used to substitute the font. Read more about Cufon here
Example Header Code
<script src="cufon-yui.js" type="text/javascript"></script> <script src="AGaramondPro_400-AGaramondPro_700-AGaramondPro_italic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('h1');Cufon.replace('p');</script>Background Image method
This method is good for replacing a few headers and best method to use with the logo of your site. Detailed px to px cross browser look with the design is needed while the code remains semantic. This method has been implemented in this version of my site since for major section H1 headers and the logo of the site.
XHTML Example Code
<h3 id="Portfolio">Portfolio</h3>CSS Example Code
h3#Portfolio
{
background:url('/portfolio/2009/gfx/title_portfolio-trans.png') no-repeat;
text-indent: -9999px;
width:229px;
height:61px;
}This will work with all browsers. A list will be added shortly of the other methods and their support.
Category: coding, css/xhtmlComments (0)
-
CSS Attribute Selectors
August 20, 2009 by J.P.
CSS Attribute selectors are a great way to target specific elements in your page and apply styles to them with out have go back and opening up the template file and changing code.
I find them extremely useful for creating form css.
There are 6 different types of attribute selectors
- [att=value]
The attribute has to have the exact value specified. - [att~=value]
The attribute’s value needs to be a whitespace separated list of words (for example, class=”title featured home”), and one of the words is exactly the specified value. - [att|=value]
The attribute’s value is exactly “value” or starts with the word “value” and is immediately followed by “-”, so it would be “value-”. - [att^=value]
The attribute’s value starts with the specified value. - [att$=value]
The attribute’s value ends with the specified value. - [att*=value]
The attribute’s value contains the specified value.
Here is an example page where I have formatted elements with attribute selectors only.
Sample CSS Used
<style type="text/css" media="screen">
p[tile='para1'] {
color:red;
}
input[type="text"] {
width: 200px;
background-color: #DDD;
border:0px;
display:block;
padding:3px;
}
input[type="submit"] {
width: 200px;
background-color: #000;
border:0px;
display:block;
padding:5px;
color:#fff;
margin-top:5px;
}
a[href$='.jpg']{
background:green;
color:#fff;
}
</style>Category: css/xhtmlTags: Attribute selectors, css | Comments (0)
- [att=value]
-
BluePrint CSS Framework (Updated)
June 1, 2009 by J.P.
Recently been reading alot about CSS frameworks that are working off a grid that are easy to use and work with… Sort of been mulling around with trying one for my next project. After reviewing a few of them from this post. I’ve decided to give BluePrint a shot.BluePrint seems very easy to work with. It’s just the matter of how best to work with the framework while adding custom content around it. view the test pages here that come with the default install. Pretty nice grid working cross browser. (Update) Some great plugins for the framework can be found here.
Over the next week or so I’m going to remake this entire blog with BluePrint and updating this post with progress and thoughts on about the CCS framework. Stay Tuned…
Update
06/2/09
Today I have been playing around for a couple hours with the framework, so far so good… its been easy to align copy and set widths. Only issues have come across so far are using <ul/> for navigation and have divs floated to the right. Still TBD if the framework supports this type of functionality or not.
06/3/09
After playing around with framework for a couple hours I was able to get a decent understanding of things. Like many CSS designers I have had a self made framework that I used to approach projects. However BluePrint is definitely a nice tool to be using. After 3-4 hours of playing around I became comfortable using it… the only thing that is a little hard to predict is how it will act with my own styles that I’ve been adding.
More updates to come…
You can view progress of the updated design in real time by clicking here.
Category: coding tool, css/xhtmlComments (0)
-
BluePrint CSS Framework (Updated)
by J.P.Recently been reading alot about CSS frameworks that are working off a grid that are easy to use and work with… Sort of been mulling around with trying one for my next project. After reviewing a few of them from this post. I’ve decided to give BluePrint a shot.BluePrint seems very easy to work with. It’s just the matter of how best to work with the framework while adding custom content around it. view the test pages here that come with the default install. Pretty nice grid working cross browser. (Update) Some great plugins for the framework can be found here.
Over the next week or so I’m going to remake this entire blog with BluePrint and updating this post with progress and thoughts on about the CCS framework. Stay Tuned…
Update
06/2/09
Today I have been playing around for a couple hours with the framework, so far so good… its been easy to align copy and set widths. Only issues have come across so far are using <ul/> for navigation and have divs floated to the right. Still TBD if the framework supports this type of functionality or not.
06/3/09
After playing around with framework for a couple hours I was able to get a decent understanding of things. Like many CSS designers I have had a self made framework that I used to approach projects. However BluePrint is definitely a nice tool to be using. After 3-4 hours of playing around I became comfortable using it… the only thing that is a little hard to predict is how it will act with my own styles that I’ve been adding.
More updates to come…
You can view progress of the updated design in real time by clicking here.
Category: coding tool, css/xhtmlComments (0)
-
FLEX & MXML The next logical step for XHTML coders?
April 7, 2009 by J.P.
I’ll be perfectly honest.. I didn’t know much about Adobe Flex. I knew that it was more or less an all coding method for Flash developers and the early adopters using JS/AJAX really enjoyed working with it. Flex based sites had always impressed me but the idea on how to make them seemed to complex. Since Flash MX had been released I had little experience writing any sort of AS other then animating banners or updating AS for already running sites.
Over the past couple of days I have been messing around with it and am truly having fun writing the code. My main focus for the last few years now has been XHTML/CSS as well as design and with basic understandings of Flash. Moving forward to improve my skill set Flex seems to be a fun tool to learn and a good next step for someone with a similar skill set.
If your interested in playing around with Flex here is a link that really helped me get started Setting up a AS3 Project in Textmate.
Category: coding, css/xhtml, flexComments (0)
-
Starting Place for Your CSS
March 10, 2009 by J.P.When starting a new project its a good idea to have some css starting templates.
Here is one that I’ve been using for the past couple of years. Using the following it will help ensure that different browsers will react the same to margins, paddings, etc that you add to your other CSS files./* Even the playing field in all browsers */ html, body, ul, ol, li, p, img, h1, h2, h3, h4, h5, h6, form, fieldset, table, a { margin: 0; padding: 0; border: 0; } /* Firefox imaage selection fix */ *:focus {outline: none} /*blockquote:before, blockquote:after, q:before, q:after { content:"" ""; } blockquote, q { quotes: "" ""; }*/ br { clear:both; } blockquote:before, blockquote:after { color: #fff; display: block; font-size: 300%; } blockquote:before { content: open-quote; height: 0; margin-left: -0.55em; } blockquote:after { content: close-quote; margin-top: -20px; margin-left: 100Find the css file here.
Category: css/xhtmlComments (1)