Archive for the 'Tools & Tutorials' Category

Nov 17 2010

CSS3 Gradient & Background Image

I am sure that I’m not the only one who is digging more and more into what CSS3 capabilities have to offer us. The buzz about all the things that you can do has been around for some time now. However, people were hesitant about taking their stab at it for one main reason – poor browser support.

A year ago, I got more enthusiastic about it after getting my hands on Handcrafted CSS by Dan Cederholm. Dan answers one question that most of us ask ourselves: Do websites need to look exactly the same in every browser? No, they sure don’t! For the most part, all that matters to many of us is that an end-user can navigate and effectively use our site while still looking nicely.

As the time went on, more and more people started to publish or post more on subject. As a matter of fact, yesterday Dan came out with yet another book, CSS3 For Web Designers. It’s second book that A Book Apart published this year, following after Jeremy Keith‘s HTML5 For Web Designers. A book that seems to have it all that you may need to know nowadays, and then some is Hardboiled Web Design from Andy Clarke.

Anyway, today was just one of those days where I got a chance to work from ground up on some new templates for a client who needs a copy of its current site for their Canadian audience, while keeping same branding as well as design of their US site. So I told myself that this will be a perfect opportunity to minimize use of all the background images that are used for gradients or shadows, as well as other visual enhancements. I’d like to demonstrate our client how much can improve overall performance of their site, when not being so set on having all the bells and whistles among all browsers but still looking good.

As I was working along, I ran into a little road Continue Reading »

2 responses so far

Aug 12 2008

CSS hacks & conditional statements

Don’t you wish sometimes there weren’t all these browsers out there for you to worry about your site breaking when developing a site with a nicely structured, table-less, semantic and valid (X)HTML/CSS markup? Well, guess what? They are here and won’t be going away very soon either. ;-)

But that is what I love about what I do, is the challenge and finding better solutions to any issue that I might a come across when cross-browser testing any site that I work on. We all have done hacks in the past, including me, but it’s been said many times by many people that it is better stay away from them and rather use conditional statements where needed instead.

Continue Reading »

No responses yet

Jul 18 2008

Encode / Decode HTML Entities

Have you ever wondered how to post code snippets on your site to demonstrate an example? I have to admit myself that I’ve tried myself to use <pre> or <code> tags, hoping that it would solve my frustration. After few trial and errors, some research, I found out that that you need to encode the html entities, like the ‚Äú<‚Äù by replacing them with their html code equivalents.

HTML Code Browser View HTML Code Browser View HTML Code Browser View HTML Code Browser View HTML Code Browser View
&copy; © &#33; ! &#95; _ &#157; ? &#219; Û
&reg; ® &#34; &#96; ` &#158; ž &#220; Ü
&nbsp; &#35; # &#97; a &#159; ≈∏ &#221; √ù
&quot; &#36; $ &#98; b &#160; &#222; √û
&amp; & &#37; % &#99; c &#161; ¡ &#223; ß
&lt; < &#38; & &#100; d &#162; ¢ &#224; à
&gt; > &#39; &#101; e &#163; £ &#225; á
&Agrave; À &#40; ( &#102; f &#164; ¤ &#226; â
&Aacute; Á &#41; ) &#103; g &#165; ¥ &#227; ã
&Acirc; Â &#42; * &#104; h &#166; ¦ &#228; ä
&Atilde; Ã &#43; + &#105; i &#167; § &#229; å
&Auml; Ä &#44; , &#106; j &#168; ¨ &#230; æ
&Aring; Å &#45; - &#107; k &#169; © &#231; ç
&AElig; Æ &#46; . &#108; l &#170; ª &#232; è
&Ccedil; Ç &#47; / &#109; m &#171; « &#233; é
&Egrave; È &#48; 0 &#110; n &#172; ¬ &#234; ê
&Eacute; É &#49; 1 &#111; o &#173; ­ &#235; ë
&Ecirc; Ê &#50; 2 &#112; p &#174; ® &#236; ì
&Euml; Ë &#51; 3 &#113; q &#175; ¯ &#237; í
&Igrave; Ì &#52; 4 &#114; r &#176; ° &#238; î
&Iacute; Í &#53; 5 &#115; s &#177; ± &#239; ï
&Icirc; Î &#54; 6 &#116; t &#178; ² &#240; ð
&Iuml; Ï &#55; 7 &#117; u &#179; ³ &#241; ñ
&ETH; Ð &#56; 8 &#118; v &#180; ´ &#242; ò
&Ntilde; Ñ &#57; 9 &#119; w &#181; µ &#243; ó
&Otilde; Õ &#58; : &#120; x &#182; ¶ &#244; ô
&Ouml; Ö &#59; ; &#121; y &#183; · &#245; õ
&Oslash; Ø &#60; < &#122; z &#184; ¸ &#246; ö
&Ugrave; √ô &#61; = &#123; { &#185; ¬π &#247; √∑
&Uacute; Ú &#62; > &#124; | &#186; º &#248; ø
&Ucirc; Û &#63; ? &#125; } &#187; » &#249; ù
&Uuml; Ü &#64; @ &#126; ~ &#188; ¼ &#250; ú
&Yacute; Ý &#65; A &#127; ? &#189; ½ &#251; û
&THORN; Þ &#66; B &#128; € &#190; ¾ &#252 ü
&szlig; ß &#67; C &#129; ? &#191; ¿ &#253; ý
&agrave; à &#68; D &#130; ‚ &#192; À &#254; þ
&aacute; á &#69; E &#131; ƒ &#193; Á &#255; ÿ
&aring; å &#70; F &#132; „ &#194; Â
&aelig; æ &#71; G &#133; … &#195; Ã
&ccedil; ç &#72; H &#134; † &#196; Ä
&egrave; è &#73; I &#135; ‡ &#197; Å
&eacute; é &#74; J &#136; ˆ &#198; Æ
&ecirc; ê &#75; K &#137; ‰ &#199; Ç
&euml; ë &#76; L &#138; Š &#200; È
&igrave; ì &#77; M &#139; ‹ &#201; É
&iacute; í &#78; N &#140; Œ &#202; ?
&icirc; î &#79; O &#141; ? &#203; Ë
&iuml; ï &#80; P &#142; Ž &#204; Ì
&eth; ð &#81; Q &#143; ? &#205; Í
&ntilde; ñ &#82; R &#144; ? &#206; Î
&ograve; ò &#83; S &#145; ‘ &#207; Ï
&oacute; ó &#84; T &#146; ’ &#208; Ð
&ocirc; ô &#85; U &#147; “ &#209; Ñ
&otilde; õ &#86; V &#148; ” &#210; Ò
&ouml; ö &#87; W &#149; • &#211; Ó
&oslash; ø &#88; X &#150; – &#212; Ô
&ugrave; ù &#89; Y &#151; — &#213; Õ
&uacute; ú &#90; Z &#152; ˜ &#214; Ö
&ucirc; û &#91; [ &#153; ™ &#215; ×
&yacute; ý &#92; \ &#154; š &#216; Ø
&thorn; þ &#93; ] &#155; › &#217; Ù
&yuml; ÿ &#94; ^ &#156; œ &#218; Ú

If you feel a little overwhelmed by trying type up all those characters when you find yourself in need of using it, you might enjoy a Encode/Decode HTML entities tool at centricle.com. You can paste in your code snippet and convert it into ACII characters just by one click. Enjoy! :)

No responses yet