|
Tweet to @xcss3x
|
|
|
While doing my research on cool CSS3 properties and new ideas, I ran across a website called Cod Drops. They have some really cool tutorials and inventions on their site. One of my favorite inventions that they had come up with was to make a website feel more like software. I think our goal for [...]
The article in review did a great job of illustrating and articulating its point on how and when to use animations. The basic fact is that many legacy browsers do not support animations and never will. You need to gauge your audience and see if animations will benefit you in the long run or if [...]
Are you one of those who is raged by the HTML elements overlapping each other? Is it getting increasingly difficult to add spaces between different HTML elements? CSS Box Model could be the answer that you are looking for. Read on! Before we get into what really is a Box Model, let me try to [...]
Something that has always annoyed me is the lack of customization (without javascript) of form elements. It might have been possible (other than padding) before CSS3, but CSS3 certainly has made modifying these form elements easier. Whether you want to customize the color, look and feel, or just the size of these buttons, you can [...]
So you are sitting in a meeting this morning and you are hearing the word responsive web design being thrown around. So what is it exactly? Responsive design and development is not new by any means. It was available in CSS2, but it being browser supported now that tablets and mobile devices are becoming more [...]
One of the new exciting technologies introduced in CSS3 is that borders can have round corners, they can also have shadows and images can be used as borders. The new border properties in CSS3 are: -border-radius -border-shadow -border-image border-radius allows one to edit all four corners of the border. border-shadow allows one to add a [...]
Key Words & Phrases Flex Container -Parent element in which flex item are located in Flex item -The child of a flex container (the parent). Direction -Leftwards -Rightwards -Downwards -Upwards What Are Flexible Box/Flex Box Flexible Box/Flex Box is a box model optimized for interface design in CSS3. One of the major pros of flexible [...]
Today we want to share a simple parallax content slider with you. Using CSS animations, we’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself. The idea for this comes from the slider of the Kendo UI homepage, a framework for [...]
One of the easiest and most effective ways of speeding up a web site is to replace background images with CSS3. A linear gradient defines a color change along a specified line. Each point on the line has a particular color. The width of the line, perpendicular to the direction of the line, extends to [...]
The CSS3 Selectors module introduces three new attribute selectors, which are grouped together under the heading “Substring Matching Attribute Selectors”. These new selectors are as follows: [att^=val] – the “begins with” selector The “begins with” selector allows for the selection of elements where a specified attribute (e.g. the href attribute of a hyperlink) begins with [...]
The Problem Web development has become a bit more complicated, now that more and more people access the Internet using their tablets, smartphones and other mobile devices. Gone are the simple days of fixed-width web page layouts, and the messy stop-gap innovation that resulted from this — using tables as layout devices. Liquid layouts soon [...]
Creating a responsive theme has become more and more prominent as the mobile world has started to take over the digital marketplace. Companies need to take into account the tablet and mobile phone world because people are beginning to make purchases from them. Whether you are marketing groceries, apps, or metal, it is important to [...]
CSS3 Gradients are a huge bonus to cutting edge browsers. They help eliminate the need for image editing programs for elements like buttons. If you are having trouble developing a gradient, look at this online css3 gradient generator. A BOX OF GRADIENTS background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); What type of gradient? (linear) [...]
There is a specific article on CSS3.info that I wanted to cover. It involves CSS3 transitions and how to stack and combine transitions. The transition-timing-function property is used to specify how the pace of the transition changes over its duration. This can be done in one of two ways. Either by specifying a number of [...]
As I was scrolling through my Google reader, I ran across a neat application called Animatable. The application has not been launched to the public yet, but the core concept is easily understood from its landing page. “Create, serve and track HTML5/CSS3 animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices.” In essence [...]
CSS3 Generator.com is a pretty intuitive tool. It allows you to prototype ideas with CSS3 without actually needing any coding experience. The precision and accuracy of the tool have been confirmed. I was worried when it was giving me cross browser compatibility compliance, but after verifying with the CSS standards and practical testing, everything that [...]
Sergio had sent me a very impressive link that had helped him out a few weeks back. How do you submit multiple forms with jQuery and Ajax? Well if you think about Facebook for a minute, each box that you are posting to is an instance of a form. This means that there needs the [...]
CSS3 is changing how we build websites. Javascript and images are being replaced with CSS3 animations and properties. What was once required to be an image is now built in CSS3. One of the best examples of this is the rounded corners on menus or buttons. The ability for CSS3 and cross browser compatibility is [...]
Alright so I might have been a little biased on these decisions, but I went with websites that I have run across and felt they deserved to be pointed out. They offer a lot of unique CSS3 features and give a great user experience without sacrificing performance or site structure. Here are 9 awe inspiring css3 websites [...]
Hello World! So after the last tutorial on styling our menu, we are going to look into animations involving CSS3. We are going to be applying the webkit animation properties to text elements inside of a specific div tag, but you can truly do this with any dom element on the page. This is what [...]