Tag Archives: CSS3

Mobile first, then the rest

Posted on by
Reply

After reading through the slide provided by a commentor, I am more than happy to give it a go right away. So I set the “Mobile first” approach to a theme for simplyWP. Well, not everyone can accept that, so it is best to test out my own thing :D

Octopink theme

Mobile stylesheet was place first, then to a bigger devices then only desktop. I find Google Chrome takes the last one as priority, which is good. Tested in both Firefox as well as Internet Explorer (8 and 9), they all runs pretty well.

Mobile and laptop

One problem came in was the media queries in Internet Explorer. IE6 doesn’t take it at all, instead, it takes the first one to show, which is the mobile version (where I will hide the NivoSlider). IE7 doesn’t take media queries well too. A little Google-it, I get MediaQueries.js, where it will enable IE to support the media queries.

The reason I put media queries at header instead of stylesheet is that IE doesn’t work well with it, even with the jQuery plugin.

This is one happy test, and I’m sure there will be more to explore.

HTML5, CSS3?

Posted on by
Reply

It is all about the latest and best code for the web developer. Nowadays, all web developers are talking about HTML5 or CSS3 and then more… I was and still wondering, do I need to take action onto them yet?

HTML

So far, I haven’t really thought about going in depth with both of them. I would rather spend time on rack card printing on promotion and marketing the business instead :P

HTML5 is not fully ready yet. It will be fully support only on 2022. 2022 is a long time, I am already 38 year old by that time, and I probably not venturing on my seat anymore.

In this 4000+ days, all web designers and developers are screaming and praying very very hard for the disappearance of IE6, and if it doesn’t, we will go through this same situation today, again.

Browsers

I believe due to the unstable of HTML5 and CSS3 rendering, most browsers don’t dare to go further than the already-been-applied CSS3. Not much browsers are taking risk on this one. Oh, by the way, Apple recently launch a HTML5 demo page Looking good, like the rest of the browsers, too. No risk :)

5 most used web trend

Posted on by
Reply

From time to time, the web trend change. I remember back in the 90′, Java dropdown menu was a huge hit! Dynamic Drive became a site I always visit when I want to learn more about HTML. Thinking back, I did regret I did not note down whatever everybody was doing on that time. So I need to note something down here and see how it change :)

Perfect Pixel

Perfect pixel

A lot of site are using the perfect pixel. It make a perfect break :)

Cut-out text

Cut-out text

Cut out text was a huge trend back last year. Almost all great design applying it. But overall color is an important step.

Radial Gradient

Radial gradient

I think until today, radial gradient still widely used.

Transparency

Transparency

Normally used by CSS3. This effect is mostly applied on tooltip.

Text Shadow

CSS3 text shadow

Well, I use this too. Actually it was brought in by CSS3 too.

Hope to see something more different next. Do you observe any trend that widely used nowadays?

Beautify your web with simple CSS3

Posted on by
1

As CSS grow, more and more CSS properties are coming out, web developers and designers are all struggling to update themselves in the web world.

CSS3 has been a topic for web developers and designers. CSS3 offers a lot of new and exciting possibilities and time saving propertise for both web developer and designers. Some web designers already starts applying CSS3 on their own project, which, you and I need to apply too.

I personally think a few CSS3 properties can work right now.

Demo

Text Shadow

Text shadow can be very nice looking if apply correctly.

CSS3 text-shadow

This is the shorthand code.

Example of CSS3 text shadow

CSS3 text-shadow - ThemeLab
CSS3 text-shadow - WongPK

Box radius

It has been ages I’m waiting for this. From the day I use table to construct the 4 corners until today! Finally it’s working on most modern browsers… IE9, not IE8 :(

CSS3 border radius

border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;

I wonder why do we have to separate the browser? -moz is for mozilla and -webkit for webkit (duh!).

Demo

However, most of the time, these trick will be brought down by the clients. Not because they are using IE but their visitors are.

As I tested IE9 Preview, it doesn’t support text-shadow, but border radius :(