CSS 3: Substring Matching Attribute Selectors
March 16, 2007 by daynah
Filed under Code Snippets, CSS, Tips and Tutorials
I was reading up on CSS 3′s Substring matching attribute selectors and discovered a fun way to reference anchor links!
Web links can be a variety of files. PDF, DOC, and HTML are some of the familiar ones. I was wondering if we could put a small icon to denote what type of file is being downloaded, and with CSS3, it’s quite possible.
Create an HTML file. Between the <head> tags, put
<style>
body {
font-size: .9em; font-weight: bold;
}
a { color: blue; line-height: 1.5em; }
a[href$=".html"] {
padding-left:20px; background-image:url(html.gif);
background-repeat: no-repeat;
}
a[href$=".pdf"] {
padding-left:20px; background-image:url(pdf.gif);
background-repeat: no-repeat;
}
a[href$=".doc"] {
padding-left:20px; background-image:url(msword.gif);
background-repeat: no-repeat;
}
</style>
and between the <body> tags, put:
<ul> <li><a href="myfile.html">My HTML File</a></li> <li><a href="myfile.pdf">My PDF File</a></li> <li><a href="myfile.doc">My Word Doc File</a></li> <li><a href="http://php-princess.net">Any Link</a></li> </ul>
Save the file as mytest.html (and download these three images as well — 
) and open it up in Firefox 2.0. You will then see something that looks like this:
Isn’t that great? The padding attribute moves the link 20px to the right. And the background-repeat attribute makes sure that image doesn’t repeat. So when I link a PDF file on my website, an image of a PDF file automatically shows next to the link. What a time-saver. :) The only drawback to this is that CSS3 isn’t fully implemented in all of today’s browser. It seems that Firefox 2.0 is ahead in the game. MSIE 7.0 and browsers below do not render CSS3 correctly. But it is a nice tip. Hopefully the next generation of browsers will render CSS3 the way it’s suppose to.
Related Products:
Code: The sequel to the #1 Techno-thriller, Cipher (Book 3 of the Robin Hood Hacker Series)Praise for Code..."I'm a fan of this series, it's really unlike anything I've ever read before. Sure there's great
action, a love thread ... Read More >
CSS for Beginners - Learn to Tweak Your Website Design (Webmaster Series)UPDATED 20th April 2013 with new, clearer screenshots!CSS for Beginners
Learn CSS with detailed instructions, step-by-step screenshot... Read More >
CSS and DocumentsCascading Style Sheets (CSS) is a powerful tool that transforms the presentation of a document or a collection of documents, and it’s spread to n... Read More >
CSS Keyboard
How cute, a keyboard made entirely in CSS! That’s a Chris Hester creation!
Related Products:
Electronics For DummiesElectronics is fascinating – want to make something of it? This book shows you how!You can make all sorts of things, once you understand what ele... Read More >
Practical Electronics for Inventors, Third EditionTHE ELECTRONICS KNOW-HOW YOU NEED TO BECOME A SUCCESSFUL INVENTOR "If there is a successor to Make: Electronics, then I believe it would have to be... Read More >
Kindle Fire HD 7", Dolby Audio, Dual-Band Wi-Fi, 16 GB - Includes Special OffersWorld's most advanced 7" tablet with stunning HD display, exclusive Dolby audio, and the fastest Wi-Fi found on a tablet. When it comes to HD displays... Read More >
CSS Gradients
September 19, 2005 by daynah
Filed under CSS, Daily Ramblings
Wow, you can create seamless gradients in CSS! It’s just a lot of code though. :D Here’s the full article on it.
Related Products:
Electronics For DummiesElectronics is fascinating – want to make something of it? This book shows you how!You can make all sorts of things, once you understand what ele... Read More >
Practical Electronics for Inventors, Third EditionTHE ELECTRONICS KNOW-HOW YOU NEED TO BECOME A SUCCESSFUL INVENTOR "If there is a successor to Make: Electronics, then I believe it would have to be... Read More >
Make: Electronics (Learning by Discovery)"This is teaching at its best!"
--Hans Camenzind, inventor of the 555 timer (the world's most successful integrated circuit), and author of... Read More >
CSS Templates
Here are some nice CSS templates that are licensed under a Creative Commons License. Thanks for the link, Dodo!
Related Products:
Practical Electronics for InventorsTHE ELECTRONICS KNOW-HOW YOU NEED TO BECOME A SUCCESSFUL INVENTORSpark your creativity and gain the electronics skills required to transform your i... Read More >
Electronics★ ★ ★ ★ ★ WAGmob: Over One Million Paying Customers from 175+ Countries. 100% Satisfaction Guaranteed. ★ ★ ★ ★ ★ WAGm... Read More >
Practical Electronics for Inventors, Third EditionTHE ELECTRONICS KNOW-HOW YOU NEED TO BECOME A SUCCESSFUL INVENTOR "If there is a successor to Make: Electronics, then I believe it would have to be... Read More >
CSS Folder Tree
I really like how Seamus created this folder tree using only css, a few images, and a bulleted list. Too bad MSIE 6.0 doesn’t support CSS2. I wonder if MSIE 7.0 will…
Related Products:
Complete Electronics Self-Teaching Guide with ProjectsAn all-in-one resource on everything electronics-related!For almost 30 years, this book has been a classic text for electronics enthusiasts. Now co... Read More >
How to Diagnose and Fix Everything ElectronicMaster the Art of Electronics Repair In this hands-on guide, a lifelong electronics repair guru shares his tested techniques and invaluable insight... Read More >
Kindle Fire HD 7", Dolby Audio, Dual-Band Wi-Fi, 16 GB - Includes Special OffersWorld's most advanced 7" tablet with stunning HD display, exclusive Dolby audio, and the fastest Wi-Fi found on a tablet. When it comes to HD displays... Read More >
HTML and CSS Table Border Style Wizard
May 26, 2005 by daynah
Filed under CSS, Links and Resources
Here’s a great HTML and CSS Table Border Style Wizard you can use.
Related Products:
Practical Electronics for InventorsTHE ELECTRONICS KNOW-HOW YOU NEED TO BECOME A SUCCESSFUL INVENTORSpark your creativity and gain the electronics skills required to transform your i... Read More >
Complete Electronics Self-Teaching Guide with ProjectsAn all-in-one resource on everything electronics-related!For almost 30 years, this book has been a classic text for electronics enthusiasts. Now co... Read More >
CSS Cheat Sheet
How nice, a CSS Cheat Sheet! I printed myself a copy. :)
Related Products:
Practical Electronics for Inventors, Third EditionTHE ELECTRONICS KNOW-HOW YOU NEED TO BECOME A SUCCESSFUL INVENTOR "If there is a successor to Make: Electronics, then I believe it would have to be... Read More >
Getting Started in ElectronicsThis is a complete electronics course in 128 pages! Author Forrest Mims teaches you the basics, takes you on a tour of analog and digital components, ... Read More >
CSS Rounded Corners Generator
March 30, 2005 by daynah
Filed under CSS, Daily Ramblings
Want rounded corners in your layout? You don’t need an image editor to create the images. Nor do you need an html editor to create the code. Try out the CSS Rounded Box Generator! It’ll save you time by generating the images, Html and CSS code for you!
Related Products:
Complete Electronics Self-Teaching Guide with ProjectsAn all-in-one resource on everything electronics-related!For almost 30 years, this book has been a classic text for electronics enthusiasts. Now co... Read More >
Electronics★ ★ ★ ★ ★ WAGmob: Over One Million Paying Customers from 175+ Countries. 100% Satisfaction Guaranteed. ★ ★ ★ ★ ★ WAGm... Read More >
How to Diagnose and Fix Everything ElectronicMaster the Art of Electronics Repair In this hands-on guide, a lifelong electronics repair guru shares his tested techniques and invaluable insight... Read More >
CSS Beauty.com
Wow, check out CSS Beauty! Definitely a great place to look for inspiration!
CSSBeauty.com is a project focused on providing its audience with a database of well designed css based websites from around the world.It’s purpose is to showcase designers’ work and to act as a small portal to the css design community.
If you are “in need of inspiration”, you have come to the right place.
Thanks Hector Alexander Giron, Creative Director for Creativo Media, for creating this beautiful gallery.
Related Products:
Practical Electronics for InventorsTHE ELECTRONICS KNOW-HOW YOU NEED TO BECOME A SUCCESSFUL INVENTORSpark your creativity and gain the electronics skills required to transform your i... Read More >
How to Diagnose and Fix Everything ElectronicMaster the Art of Electronics Repair In this hands-on guide, a lifelong electronics repair guru shares his tested techniques and invaluable insight... Read More >
Cute and Unique Menu CSS Tabs
March 29, 2005 by daynah
Filed under CSS, Daily Ramblings
Cute Menu tabs at Komodomedia.com! I love the unique and fresh look. A great display of CSS. ;) Thanks for the link, Simon!
Related Products:
Electronics★ ★ ★ ★ ★ WAGmob: Over One Million Paying Customers from 175+ Countries. 100% Satisfaction Guaranteed. ★ ★ ★ ★ ★ WAGm... Read More >
Practical Electronics for InventorsTHE ELECTRONICS KNOW-HOW YOU NEED TO BECOME A SUCCESSFUL INVENTORSpark your creativity and gain the electronics skills required to transform your i... Read More >
Electronics For DummiesElectronics is fascinating – want to make something of it? This book shows you how!You can make all sorts of things, once you understand what ele... Read More >
CSS: W3C buttons Made Without Images
March 29, 2005 by daynah
Filed under CSS, Daily Ramblings
Wow, these W3C buttons are made without images. Only CSS is used to make them. Very interesting!
Thanks for the link, Dodo!
Related Products:
Getting Started in ElectronicsThis is a complete electronics course in 128 pages! Author Forrest Mims teaches you the basics, takes you on a tour of analog and digital components, ... Read More >
Kindle Fire HD 7", Dolby Audio, Dual-Band Wi-Fi, 16 GB - Includes Special OffersWorld's most advanced 7" tablet with stunning HD display, exclusive Dolby audio, and the fastest Wi-Fi found on a tablet. When it comes to HD displays... Read More >
CSS: Resizing Large Images to Fit in Containers (also work in MSIE!)
March 28, 2005 by daynah
Filed under CSS, Scripts and Coding
In my post about CSS: Resizing Large Images to Fit in Containers, I hadn’t noticed that the CSS2 code, “max-width” didn’t work in MS Internet Explorer. So I looked around and found this nice piece of code from Ozone Asylum Forums (based on this article).
So to make an image resize in MSIE, use this CSS Code.
<head>
<style type=”text/css”>
.resizeImage {
/* for Firefox, Opera and others: */
max-width: 250px;
}
</style>
<!–[if gte IE 5]>
<style type=”text/css”>
.resizeImage {
/* For Internet Explorer: */
width: expression(Math.min(parseInt(this.offsetWidth), 250 ) + “px”);
}
</style>
<![endif]–>
</head>
<body>
<img src=”myimage.jpg” class=”resizeImage” alt=”my image” />
</body>
</html>
So that’s how you get the ‘max-width’ CSS property to work in Internet Explorer? …You don’t. ;) Just use width and the Javascript trick! Thank you for pointing this out to me how max-width didn’t work in MSIE, John Adams.
Resources: Ozone Asylum Forums, svendtofte.com.
Related Products:
Practical Electronics for Inventors, Third EditionTHE ELECTRONICS KNOW-HOW YOU NEED TO BECOME A SUCCESSFUL INVENTOR "If there is a successor to Make: Electronics, then I believe it would have to be... Read More >
Kindle Fire HD 7", Dolby Audio, Dual-Band Wi-Fi, 16 GB - Includes Special OffersWorld's most advanced 7" tablet with stunning HD display, exclusive Dolby audio, and the fastest Wi-Fi found on a tablet. When it comes to HD displays... Read More >
Electronics★ ★ ★ ★ ★ WAGmob: Over One Million Paying Customers from 175+ Countries. 100% Satisfaction Guaranteed. ★ ★ ★ ★ ★ WAGm... Read More >
CSS: Resizing Large Images to Fit in Containers
I was playing around with the MX4 theme by Mike. And I noticed how the images I post are resized to fit within the container.
For example, my last post with the snapshot has a 450px image in it. When I changed to the MX4 theme, my image was resize (with CSS!) to by 342px.
So I was looking through the stylesheet and found this nice code:
p img { max-width: 100%; }
This CSS code will resize the image to fit the container if there is any overflow. That’ll come in very handy. ;)
I’m in love with this MX4 WordPress 1.5 theme. If you like it to, download it here.
Related Products:
How to Diagnose and Fix Everything ElectronicMaster the Art of Electronics Repair In this hands-on guide, a lifelong electronics repair guru shares his tested techniques and invaluable insight... Read More >
Getting Started in ElectronicsThis is a complete electronics course in 128 pages! Author Forrest Mims teaches you the basics, takes you on a tour of analog and digital components, ... Read More >
Electronics For DummiesElectronics is fascinating – want to make something of it? This book shows you how!You can make all sorts of things, once you understand what ele... Read More >
Javascript: Nifty Nice Titles
March 25, 2005 by daynah
Filed under CSS, Javascript, Scripts and Coding
I noticed that some websites had these nifty popup divs that came up when I hovered over the titles. I was curious, so I googled, and found this “Nice Titles” article. I decided to test it on my site, and viola, I have nice titles! It was pretty easy to install. I just uploaded the nicetitle.js file to my theme directory. Then add the CSS classes from nicetitle.css into my style.css. Then modified the background image and uploaded that to my images/ directory. Then I added:
<script type="text/javascript" src="nicetitle.js">
</script>
to my header.php file. :) I love transparent PNG! You can see through the div!
While looking at the stylesheet definitions, I also learned something new.
-moz-border-radius: 12px;
This style attribute make the edges of it’s class rounded. Unfortunately, it only works in Mozilla/Firefox. But it’s nifty nevertheless!
Related Products:
Kindle Fire HD 7", Dolby Audio, Dual-Band Wi-Fi, 16 GB - Includes Special OffersWorld's most advanced 7" tablet with stunning HD display, exclusive Dolby audio, and the fastest Wi-Fi found on a tablet. When it comes to HD displays... Read More >
Getting Started in ElectronicsThis is a complete electronics course in 128 pages! Author Forrest Mims teaches you the basics, takes you on a tour of analog and digital components, ... Read More >
Electronics★ ★ ★ ★ ★ WAGmob: Over One Million Paying Customers from 175+ Countries. 100% Satisfaction Guaranteed. ★ ★ ★ ★ ★ WAGm... Read More >
CSS: Same link text, just different colors
March 23, 2005 by daynah
Filed under CSS, Daily Ramblings
CSS Trick: Same link text, just different colors
I thought this was a cute CSS trick. I never thought about doing that, but then again, I probably wouldn’t use it in my designs. But who knows. ;)
Related Products:
Complete Electronics Self-Teaching Guide with ProjectsAn all-in-one resource on everything electronics-related!For almost 30 years, this book has been a classic text for electronics enthusiasts. Now co... Read More >
Electronics★ ★ ★ ★ ★ WAGmob: Over One Million Paying Customers from 175+ Countries. 100% Satisfaction Guaranteed. ★ ★ ★ ★ ★ WAGm... Read More >
How to Diagnose and Fix Everything ElectronicMaster the Art of Electronics Repair In this hands-on guide, a lifelong electronics repair guru shares his tested techniques and invaluable insight... Read More >
CSS: Animated Examples
This is certainly an interesting way to demonstrate CSS! It’s a free service from VisiBone.com.
Resources: Style-Sheet.info
Related Products:
Electronics★ ★ ★ ★ ★ WAGmob: Over One Million Paying Customers from 175+ Countries. 100% Satisfaction Guaranteed. ★ ★ ★ ★ ★ WAGm... Read More >
Complete Electronics Self-Teaching Guide with ProjectsAn all-in-one resource on everything electronics-related!For almost 30 years, this book has been a classic text for electronics enthusiasts. Now co... Read More >
Getting Started in ElectronicsThis is a complete electronics course in 128 pages! Author Forrest Mims teaches you the basics, takes you on a tour of analog and digital components, ... Read More >
CSS: Fun with Forms (Input Elements)
This is one of my favorite articles — Fun with forms – customized input elements. Søren Madsen shows you how to create forms that is both customizable as well as cleaner and accessible. This is all done with a touch of CSS.
Turn a regular html form like this to this lovely form:
Resources: Picment.com
Related Products:
Kindle Fire HD 7", Dolby Audio, Dual-Band Wi-Fi, 16 GB - Includes Special OffersWorld's most advanced 7" tablet with stunning HD display, exclusive Dolby audio, and the fastest Wi-Fi found on a tablet. When it comes to HD displays... Read More >
Make: Electronics (Learning by Discovery)"This is teaching at its best!"
--Hans Camenzind, inventor of the 555 timer (the world's most successful integrated circuit), and author of... Read More >
Electronics For DummiesElectronics is fascinating – want to make something of it? This book shows you how!You can make all sorts of things, once you understand what ele... Read More >
A CSS styled Table
We all know that DIVs and CSS go hand-in-hand, but let’s not leave the table tag in the dust. Tables can be beautiful too! And Veerle Pieters shows us how. With a little bit of CSS, tables can turn into very stylish elements.
Thank you Digital Media Minute for the link!
Resources: A CSS styled table
Related Products:
Complete Electronics Self-Teaching Guide with ProjectsAn all-in-one resource on everything electronics-related!For almost 30 years, this book has been a classic text for electronics enthusiasts. Now co... Read More >
Electronics★ ★ ★ ★ ★ WAGmob: Over One Million Paying Customers from 175+ Countries. 100% Satisfaction Guaranteed. ★ ★ ★ ★ ★ WAGm... Read More >
Make: Electronics (Learning by Discovery)"This is teaching at its best!"
--Hans Camenzind, inventor of the 555 timer (the world's most successful integrated circuit), and author of... Read More >
Amazing CSS
Here are some very amazing games made with ONLY CSS!
Related Products:
How to Diagnose and Fix Everything ElectronicMaster the Art of Electronics Repair In this hands-on guide, a lifelong electronics repair guru shares his tested techniques and invaluable insight... Read More >
Practical Electronics for InventorsTHE ELECTRONICS KNOW-HOW YOU NEED TO BECOME A SUCCESSFUL INVENTORSpark your creativity and gain the electronics skills required to transform your i... Read More >
Make: Electronics (Learning by Discovery)"This is teaching at its best!"
--Hans Camenzind, inventor of the 555 timer (the world's most successful integrated circuit), and author of... Read More >
CSS Scrollbar Script
February 25, 2005 by daynah
Filed under CSS, Links and Resources
Here’s a very nifty scrollbar color changing tool. Of course, you can only see this style sheet in a MSIE browser.
Related Products:
Electronics★ ★ ★ ★ ★ WAGmob: Over One Million Paying Customers from 175+ Countries. 100% Satisfaction Guaranteed. ★ ★ ★ ★ ★ WAGm... Read More >
Kindle Fire HD 7", Dolby Audio, Dual-Band Wi-Fi, 16 GB - Includes Special OffersWorld's most advanced 7" tablet with stunning HD display, exclusive Dolby audio, and the fastest Wi-Fi found on a tablet. When it comes to HD displays... Read More >
Complete Electronics Self-Teaching Guide with ProjectsAn all-in-one resource on everything electronics-related!For almost 30 years, this book has been a classic text for electronics enthusiasts. Now co... Read More >
@
