Please note: This example currently only works in Chrome
That's a hard title to think of. To explain a little further: have you ever required text on the page that needs to be half one colour and half another, vertically? It's not something I've ever had to think about before but when I did the obvious thing that spread to mind was gradients. That makes sense, and sounds quite easy. But then a spanner in the works: "without using gradients" was spoken.
As with most CSS problems I come across, the first thought that came to mind was pseudo-elements. :before and :after are two of the most handy things to come to CSS3. They can be used to make stuff appear that isn't actually there! CSS3 arrows are probably the most widely used of these, but you can also use them to create page curls. In fact just read this post to see what amazing things they bring to web page designs.
I've been a little annoyed with the font rendering in Google Chrome recently because it just hasn't been a crisp as in other modern browsers such as Firefox (see here, and here, and here). It seems that Chrome 37 has now fixed this issue released in May (so get your browser updated!) meaning that locally hosted web fonts that use SVG formats for Chrome users now look very polished.
However, there's still a slight issue in Chrome when you use fonts from their hosted fonts. When you include the link to the web font in the head of your page it detects the browser being used and serves the correct font type for that browser (speeding things up and keeping the filesize as small as possible). But this method does not return an SVG for Chrome users, it returns a .woff file. Chrome can't cope with these so the anti-aliasing will be very much non-existent.
So, there seems to be a bit of a debate going around at the moment about how to highlight what a link does, or where it goes. As an example, external links on Wikipedia have a little arrow to the right that indicates you will leave the site when you click it (or it opens in a new window. This is a moot point). That's quite handy, but doesn't look that great. Especially when you have lots of them together, like at the bottom with all of the references.
So, how about we jazz things up with a little CSS magic!? Below is an external link. I've made this external by adding a rel attribute of "external" to it. Semantic. But, this also comes in handy with CSS3 where you can style elements based on their attributes. This means we can style any anchor that has an attribute of rel="external" in any way we want!
I give you, the animated external link!
Please note, there is no javascript here and it will only work this nicely in browsers that support attribute styles in CSS3, and transitions (those that don't it'll just appear). But, that's pretty much all of the modern, and popular ones covered!
So, a requirement of a recent project of mine was to create a "Metro"-themed website. I really wanted those nice loaders that you get with Microsoft applications today and thought it's probably possible with CSS3. And it is!
Check it out on JSFiddle and let me know what you think and whether there are any improvements you can think of. I've added support for the browsers that support transitions so the code is currently fairly bloated but using a CSS pre-processor you can avoid this headache.
For an example here check out the below!
There are LOADS of really cool things happening with CSS3 at the moment. Have you seen the CSS3 solar system? Or really cool and detailed CSS3 Clouds? If not, I really suggest you check those out first. The solar system is quite a simple concept now with the use of border radius and simple rotation animations being quite standard among users and the latest browsers. The clouds are something a little more special using some JavaScript on top of CSS to get the major effects (check out the tutorial here).
However, as cool as these things are something came along today that I found very cool indeed! It's a bit of fun with what you can do these days, but has some practical possibilites for certain projects. Check out the link below before a quick explanation.
I should probably be a little more specific. I love writing the CSS that produces a responsive website. I've been reading up on responsive design since it's inception and then popularity. And why wouldn't it be popular? A massive percentage of browsing these days is done on the ever faster and better mobiles. Responsive design takes the middle-ground between a website built for the desktop, and an app built for the phone. It covers both with beauty and simplicity!
Of course, when I say simplicity I mean it's simple when you know how. But the fundamentals to create a responsive website are pretty basic thanks to CSS media queries, and the plethora of responsive toolkits you can find on the web today (Bootstrap, Foundation, Skeleton to name but a few). In fact, if you want to go ahead and don't want to do it yourself, dropping any of these into your site (with a few tweaks) will see you all responsive in no time!
Today I stumbled upon something magical. I've recently started really getting into responsive designs and media CSS rules and how much power they can bring to a website that is likely to run on a mobile device. Technologies have changed a lot and what's available to us, web developers, is nothing short of a miracle compared to a couple of years ago. However, a lot of the tools and funky plugins available out there for such libraries as jQuery are still falling behind in a lot of ways compared to what is available. And so, it is with great pleasure that I bring to your attention Royal Slider.
I encourage you to click that link. The slider has loads of options for different styles, types and animations as you would expect from the update to an already popular plugin. But the best part happens when you resize your browser window or view the page on a mobile. Go on. Do it.
The way everything scales so effortlessly is superb. The animations remain smooth on my testing including when changing the orient of my mobile device. I also really like the default animation shown on the home page of the plugin. It's smooth and looks great. Some of the gallery examples are really great too.
I was reading the latest post on Ajaxian and found Marcin Wichary (the creator of the Google Pacman Logo) to be an absolute genius with some very interesting ideas. Thought I'd try out a couple of them here, so to start with here's some blurry text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus arcu sit amet erat feugiat accumsan. Morbi rutrum dui a lacus sollicitudin in accumsan quam vestibulum. In hac habitasse platea dictumst. Donec sed sapien mi, ut blandit orci. Integer iaculis, massa vitae blandit posuere, sem leo bibendum lacus, vel varius arcu ligula eu eros. Integer gravida scelerisque eros eget auctor. Sed malesuada volutpat vehicula. Vivamus est nunc, adipiscing ut auctor congue, laoreet ac purus. Nunc vel velit sed est sodales molestie. Cras semper pharetra ullamcorper. Nam sollicitudin vulputate gravida. Suspendisse nec odio tellus. In ipsum nibh, scelerisque quis tincidunt eget, tempus vel risus. Mauris viverra convallis ligula at vulputate. Nullam accumsan tristique diam, non mattis justo dapibus et. Donec sodales ligula a nisl tincidunt ut tempor mi adipiscing.