Enkoder. Posting your email address on a website is a sure-fire way to get an inbox full of Spam. The Enkoder helps protect email addresses by converting them into encrypted JavaScript code so only real people using real browsers will see them. The Enkoder Form will encrypt your Email address and convert the result to a self evaluating JavaScript, hiding it from Email-harvesting robots which crawl the web looking for exposed addresses. Your address will be displayed correctly by web-browsers, but will be virtually indecipherable to Email harvesting robots. Although the Enkoder should help to reduce Spam, no solution is perfect. The only way to truly prevent Spam is to never publish your address at all, ever, anywhere.
The Basic Form Enter the information for your link in the form below. The Advanced Form If you're comfortable creating your own HTML, just paste your code into the box below. Notes We do not store or save any of the information gathered here. We do not support our free tools. Xhtml/CSS.
CSS3. Multiple Backgrounds and Borders with CSS 2.1 – Nicolas Gallagher – Blog & Ephemera. Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning.
No CSS3 support required. Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. How does it work? Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. But they have distinct benefits – beyond semantics – over the use of nested HTML elements. To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning. The pseudo-elements contain no true content and are absolutely positioned. What effects can be achieved? Most structural elements will contain child elements. Understanding CSS3 Transitions. It was 1997 and I was sitting in a terribly run-down apartment in beautiful Allston, Massachusetts. A typical late night of viewing source and teaching myself HTML followed a day of packing CDs at a local record label for peanuts (hence the run-down apartment).
I’m sure you can relate. Article Continues Below One triumphant night, I pumped my fist in sweet victory. I’d just successfully coded my first JavaScript image rollover. I still remember the amazement of seeing a crudely designed button graphic I’d cobbled together “swap” to a different one when hovered over by the mouse. We’ve come a long way over the past decade in regard to interaction and visual experience on the web.
My first JavaScript rollover back in 1997 took me several nights of head scratching, many lines of code that seemed alien to me at the time, and multiple images. We can start to use CSS3 transitions right now as long as we carefully choose the situations in which to use them. Tail wagging the dog#section1. CSS3 PIE: CSS3 decorations for IE. CSS On-Hover Image Captions - CSS Image Effects - Adding Captions to Images - CSS/XHTML Tutorial. Adobe MAX slides and resources. Pure CSS3 Post Tags. This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts.
Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles. Take a look at the demo For CSS triangles you need to manipulate borders of an element that has zero height and width. CSS circle is simpler. All you need is a square element with rounded corners set to at least half the size of the element. The border radius will then merge into a circle. I usually markup tags with unordered list. <ul class="tags"><li><a href="#">tag</a></li><li><a href="#">tag name</a></li></ul> I will add :before and :after pseudo elements and style them to achieve the styling I wanted I am placing the tags list at the bottom of the post element with adjusting ULs absolute position Height (and line-height) of the list item LI and anchor A is set.
Next to style is the anchor element. To achieve the pointed edge we are adding a :before pseudo-element. That is it! Pure CSS3 box-shadow page curl effect. Text-Shadow Exposed: Make cool and clever text effects with css text-shadow › Kremalicious. The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it’s not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image. Because it’s included in Safari since version 1.1(!) Mac users should be aware of various effects done by this property. In fact, most companys and persons with mac users as their main target audience use this effect on their websites. This article describes how text-shadow works, what you can do with it and which browsers currently support it.
At the end of this article I’ve made up some examples and provide a list of useful resources. Here’s an overview of the headlines in this article. What text-shadow is good forWhich browsers support itCross-browser compatibilityHow does it work and how to use itExamples with code & demosHack: Safari Text RenderingMore articles and resources.
CSS Positioning 101. If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” For others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. Sometimes, in a bug-fixing fury, we apply different position values to a given selector until we get one that works. This is a tedious process that can work for a time, but it behooves us to know why specifying something like position: relative can fix your layout bug. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit.
Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Example D shows our new markup. Rounded corners and shadowed boxes. Rounded corners and shadowed boxes This page was inspired by one created by Arve Bersvendsen. He has many more interesting CSS demos. CSS3 will have properties to make rounded borders, borders consisting of images and boxes with shadows, but with some work you can simulate some of them already with CSS2 — and without any tables or extra mark-up.
Of course, rounded borders and shadows will be much simpler with CSS3. For example, to give a paragraph a thick red border with rounded corners, you would need just two lines of CSS3 similar to this: And to add a blurry drop shadow half an em below and to the right of the paragraph, just one line would be enough: (You can try here and here if it works already.) Five images on one element The main trick is to use generated content (':before' and ':after') to put four extra images on an element. We create five PNG images and put them in the four corners and against the right edge of the element. Top left corner: top edge and top right corner: