Categories
Adobe CSS Dreamweaver Fix HTML HTML5 PHP Website Design Wordpress Web Design

Dreamweaver FIX Removing Extra Line Breaks in CSS HTML PHP

Isn’t it insanely annoying some times when you open a CSS File or a HTML File only to find Dreamweaver has added loads of blank lines, if your CSS is more white space than code then running this script will be very helpful.

I’ve used a tonne of CSS Compressors to fix Dreamweavers fail of blank lines in the past, but most of them do not support CSS 3, and the ones that do – seemingly do not support the transition effect.  This however, works fine with PHP, HTML and CSS (self tested).  So no more tears for those added line breaks in your PHP or CSS, just run this fix!

Open the file in Adobe Dreamweaver, press CTRL+F to load the Find & Replace dialog box (or Edit > Find and Replace).

Do the search on the source code view.

Check the box “Use regular expression” and un-check any other boxes.
Find: [\r\n]{2,}
Replace: \n
The hit “replace all”

It may take a while so fit back and wait whilst your CSS / HTML or PHP Document is flushed of all those annoying line breaks!

NOTE:  PLEASE ENSURE YOU BACK UP OR MAKE  A DUPLICATE OF ALL FILES BEFORE “CLEANING”.

> I will not be help responsible for any lost work caused by this quick fix!

Categories
Cool Stuff CSS Fonts HTML Typography

Google Web Fonts v2

Today I stumbled upon the v2 of Google Web Fonts

WOW, Blown away. Typekit had better watch their toes with this beast!

http://www.google.com/webfonts/v2

Try it now! It’s everything and more! Still “only” 180 fonts but that seems to be growing insanely quick!

Categories
CSS HTML HTML5

HTML 5 & CSS 3 + General Web Stuff Books I Want!

A few books I want! 🙂

If anyone has any reviews about them (if they’re good, bad or terribad!) then let me know 🙂

Categories
CSS Webkit

Webkit Transitions and Effects Examples

Transition Effect on Resizing Fonts

Elements that have -webkit-transition on them (using “all” or specifying font-size) will utilize that transition when bumping up and down size in the browser.

From testing (on Chrome atleast) the quicker the transition the smoother it is, you’d expect a 4second transition to be smoother, but it isn’t* (this maybe a chrome only issue?).

-webkit-transition: all 1s ease;
-webkit-transition: all 0.5s ease-in-out;

via Forrst: http://forrst.com/posts/WebKit_Transition_on_Resizing_Text-Xvf

Nicer Looking Type

html, body {
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
text-rendering: optimizeLegibility;
}

via Forrst: http://forrst.com/posts/Nicer_looking_type-XPZ

CSS Pinstripe Background (No IMAGE)

@pinstripe-color: #323232;

html {
background-color: #646464;
background-image:
-webkit-gradient(linear, 100% 0%, 0% 100%,
from(transparent),
color-stop(0.15, transparent),
color-stop(0.15, @pinstripe-color),
color-stop(0.50, @pinstripe-color),
color-stop(0.50, transparent),
color-stop(0.65, transparent),
color-stop(0.65, @pinstripe-color),
to(@pinstripe-color));
background-image:
-moz-linear-gradient(100% 0%,
transparent 0.15,
@pinstripe-color 0.15,
@pinstripe-color 0.50,
transparent 0.50,
transparent 0.65,
@pinstripe-color 0.65);
.background-size(60px, 60px);
background-attachment: fixed;
overflow-y: scroll;
}

.background-size(@x, @y) {
-webkit-background-size: @x @y;
-moz-background-size: @x @y;
-o-background-size: @x @y;
background-size: @x @y;
}

Apparently very bad for performance when using a Background, however buttons, header BG’s? Maybe!

via Forrst: http://forrst.com/posts/Pinstripes_with_only_CSS-X6X

Fading Text Transition Effect – Belief – Lie

See Link

via Forrst: http://forrst.com/posts/Belie_and_Lief-XPl

Categories
Cool Stuff CSS HTML Typography Website Design

Terrific Typography

customfontsI’ve recently been designing and coding a new website for a project that’s going to be selling a Predator Waterproof Camera and a fantastic new Liquid Images Mask which has been rather fun and exciting.

@Minute44 suggested I try out @font-face that everyone’s been going nuts about recently, and after a few more recent reads I realised that Firefox, Safari and Chrome now supported this CSS 3 property.  Now after I got going I was feeling abit blue with the whole Microsoft Fail, however I quickly came across a fantastic TTF to EOT, which Microsoft IE will use avaliable here for free (online app).  Now if like me you have mostly OTF fonts and need them converting to TTF then this page is for you (another online app, also free).  If you’re on a Mac then FontForge is your poison!

And then just upload your fonts to the same folder as your CSS File and use something like this:

/* — Funky Fontage — */

/* For the Fail Browsers.. IE */

@font-face {
font-family: “Quicksand Book”;
src: url(QuicksandBook.eot);
font-style: normal;
font-weight: normal;
}

@font-face {
font-family: “Quicksand Book”;
src: url(QuicksandBold.eot);
font-style: normal;
font-weight: bold;
}

/* Now for the Pro Browsers *cough*firefox*cough* */

@font-face {
font-family: Quicksand Book;
font-style: normal;
font-weight: normal;
src: url(QuicksandBook.otf) format(‘opentype’);
}

@font-face {
font-family: Quicksand Book;
font-style: normal;
font-weight: bold;
src: url(QuicksandBold.otf) format(‘opentype’);
}

/* — End the Custom Fonts — */

You’ll find a custom font running sexy on IE 7, IE 8, FireFox, Safari and Chrome at the Underwater Camera – Waterproof Camera website.

You can expect to see the next project I undertake to include some nice use of custom fonts for a superb web viewing experience whilst maintaining accessibility, compatability and SEO Friendly Source.