Mes liens
796 shaares
176 results
tagged
Css3
I am proud to announce the Alpha release of SpreadJS: the fastest and easiest way to deploy powerful spreadsheets in your web applications!
SpreadJS is a new product derived from the Spread Product Family, which is a set of spreadsheet components for application development on a variety of platforms. SpreadJS is sure to bring value to your web applications with time-saving features.
Based on HTML5, jQuery, and CSS3, SpreadJS brings all the data visualization and calculation features into your web applications. Create calculators, dynamic interactive dashboards, rich colorful reports, and much more! The rich JavaScript API for SpreadJS provides a complete object model for the spreadsheet document, and a rich set of user interface events which your application can handle to customize the user experience. SpreadJS is designed to provide an Excel-like user interface for spreadsheet navigation, editing, formula calculation, column/row resizing, range drag-drop and drag-fill, and other powerful spreadsheet UI elements such as table sorting and filtering.
SpreadJS is a new product derived from the Spread Product Family, which is a set of spreadsheet components for application development on a variety of platforms. SpreadJS is sure to bring value to your web applications with time-saving features.
Based on HTML5, jQuery, and CSS3, SpreadJS brings all the data visualization and calculation features into your web applications. Create calculators, dynamic interactive dashboards, rich colorful reports, and much more! The rich JavaScript API for SpreadJS provides a complete object model for the spreadsheet document, and a rich set of user interface events which your application can handle to customize the user experience. SpreadJS is designed to provide an Excel-like user interface for spreadsheet navigation, editing, formula calculation, column/row resizing, range drag-drop and drag-fill, and other powerful spreadsheet UI elements such as table sorting and filtering.
I'm pretty happy with CSS. I know it's common to complain about CSS and how it was never meant to build web pages like we do now and it's ill-suited to many tasks and yadda yadda. But I dunno. I work with it every single day and I feel like it's getting the job done pretty well. Maybe I don't have those fancy big thinker thoughts that can foresee alternate universes where more perfect languages exist. Or something.
xy.css is a lightweight CSS template for building responsive liquid-grid designs. It brings together the best CSS techniques from around the Web and integrates them into a single, powerful style sheet template.
Have you thought about remaking your website header section? As you know – this is the most important section of any website. First of all, all visitors are paying attention on this part of the site. And, the more clean and tidy it is, the better opinions on your site get visitors. In our today’s article I will show you how to create high-quality and modern header for your site. This header will include a logo, several links in the upper right corner, drop-down navigation menu and search form.
Before we start, I would like to show you what exactly we are going to buid:
Before we start, I would like to show you what exactly we are going to buid:
An Advanced Guide to HTML & CSS takes a deeper look at front-end design and development, expanding on what is covered in the beginner’s guide. Studying modern front-end development, this guide teaches the latest for any designer looking to round out their front-end skills.
Hi guys! First of all let me wish a belated happy new year to all of you. Today we are going to do something different: dig deep into one single CSS property. And that property is going to be the “clip” property.
I’m pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. It’s no big deal guys, we will cover pretty much everything you have to know about it.
The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as “crop”. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property. Probably, with some limitations of course. We’ll take a look at them later.
I’m pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. It’s no big deal guys, we will cover pretty much everything you have to know about it.
The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as “crop”. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property. Probably, with some limitations of course. We’ll take a look at them later.
I’ve recently watched a good video presentation by Mathias from Fronteers 2012 which I found both interesting and inspirational. I already had in mind some similar things, so I ended up writing this article down. It’s about some random things and facts you may (not) have known about HTML & CSS.
Workless started out as a mashup of all the great things I liked about Twitter Bootstrap and HTML5Boilerplate. The more I worked with with it, the more I added in order to make life easier when working on any project.
It's now pretty much turned into a framework in it's own right, with all the stuff you need and none of the stuff you don't. It's about saving time and keeping your projects DRY.
It's now pretty much turned into a framework in it's own right, with all the stuff you need and none of the stuff you don't. It's about saving time and keeping your projects DRY.
CSS3 transitions bring simple and elegant animations to web applications, but there’s a lot more to the spec than first meets the eye.
In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions.
Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU.
In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions.
Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU.
CSS masks were added to the WebKit engine by Apple quite a while ago, namely back in April 2008. Masks offer the ability to control the opacity/transparency of elements on a per-pixel basis, similar to how the alpha/transparency-channel of "24-bit"-PNGs or 32-bit-TIFFs work.
These images consist of the usual R(ed) G(reen) and B(lue) channels that define the colors of each pixel. But on top there is a fourth channel, the alpha channel, that defines every pixel's opacity through luminance: White meaning opaque, black meaning transparent, and countless grey values defining the semi-transparent inbetweens. As you can see in the picture to the left.
With CSS masks it is an HTML element that gets this type of treatment. And instead of using an alpha channel you assign an image resource to a CSS property named -webkit-mask-image, e.g. -webkit-mask-image: url(mouse.png);. Transparency is then read from that mask image and applied to the HTML element, like the picture on the right shows.
These images consist of the usual R(ed) G(reen) and B(lue) channels that define the colors of each pixel. But on top there is a fourth channel, the alpha channel, that defines every pixel's opacity through luminance: White meaning opaque, black meaning transparent, and countless grey values defining the semi-transparent inbetweens. As you can see in the picture to the left.
With CSS masks it is an HTML element that gets this type of treatment. And instead of using an alpha channel you assign an image resource to a CSS property named -webkit-mask-image, e.g. -webkit-mask-image: url(mouse.png);. Transparency is then read from that mask image and applied to the HTML element, like the picture on the right shows.
Modern browsers like Internet Explorer 10 support CSS 3D and 2D Transforms and CSS Animations. By tapping the power of your GPU and running asynchronously from regular JavaScript, these technologies provide a more performant and flexible alternative to traditional script-based animations for Web content. I’ve talked about how to build with CSS 3D Transforms as well as CSS Animations and Transitions in previous articles. In this article, I’d like to introduce a more “unconventional” use case for these technologies by describing the concept of “full-page animations” that can be used during the navigation process to add fluidity and continuity to browsing. Our target is to achieve a seamless browsing experience in which content smoothly appears into view when the user visits a page and transitions away when he clicks on a link or performs a relevant action.
A lightweight image gallery modal window script which uses only CSS3 for silky-smooth animations and transitions. The goal was to great an image gallery script that utilizes GPU rending instead is the 90% scripts out there which are using javascript to move things around the old fashioned way.
Reuze is a teeny-tiny front end framework that makes structuring HTML and CSS for mid-to-large sized content-rich sites a breeze. It plays nice with other frameworks such as Foundation and Boostrap but also works equally well on it's own.
Quickly create semantic HTML5 code blocks that conveniently sit in 'namespaced' containers ('.ac' for article content as an example) and download the accompanying 10KB (or less) of CSS awesomeness from Github. It's responsive, IE8-friendly and topped up with RDFa Lite goodness!
Quickly create semantic HTML5 code blocks that conveniently sit in 'namespaced' containers ('.ac' for article content as an example) and download the accompanying 10KB (or less) of CSS awesomeness from Github. It's responsive, IE8-friendly and topped up with RDFa Lite goodness!
A lot is said about LESS and Sass, and for good reason. CSS is hell to get right and even harder to maintain. LESS and Sass (and similar tools) make CSS into a much more useful language.
But when people talk about why they are so great, they miss the main point. It is true that your style files are now shorter and more readable. However, there is something deeper going on than mere saving of keystrokes and being able to name things.
In this essay, I will try to put into words (and some pictures) what my intuition tells me as a developer and programming language enthusiast to clarify why CSS is innately unmaintainable, does not satisfy its own design goals, and why LESS and Sass make a bad language more bearable. I also will propose solutions which would raise the bar past the high level where LESS and Sass have taken it.
But when people talk about why they are so great, they miss the main point. It is true that your style files are now shorter and more readable. However, there is something deeper going on than mere saving of keystrokes and being able to name things.
In this essay, I will try to put into words (and some pictures) what my intuition tells me as a developer and programming language enthusiast to clarify why CSS is innately unmaintainable, does not satisfy its own design goals, and why LESS and Sass make a bad language more bearable. I also will propose solutions which would raise the bar past the high level where LESS and Sass have taken it.
This site teaches the CSS fundamentals that are used in any CSS layout.
I assume you already know how to make things colorful. You know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. Let's see if we can save you some fury on your next project.
I assume you already know how to make things colorful. You know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. Let's see if we can save you some fury on your next project.
Built using SASS and CSS3 media queries, Centurion is a responsive web framework that scales with your device. No longer do you need to worry about the screen size of an iPhone or an Android tablet since Centurion does the work for you.
Want to test Centurion out simply fork or download the repository on Github to get started and see the power a responsive framework can have on your next web project.
Want to test Centurion out simply fork or download the repository on Github to get started and see the power a responsive framework can have on your next web project.
This is a free & open source icon fonts hosting service (like Google Web Fonts, but icon fonts only). Hurray!
Here is another presentation I gave at a company training session recently – this time on CSS Line-height (which is far more complex than it first appears). A simple, step-by-step presentation on CSS line-height covering how to apply various line-height values, as well as line-height and the inline box model. Hope you find it useful!
Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail. Browser support is going to grow quickly, so you’ll be ahead of the game when support is wide enough for Flexbox to be practical. Read on if you want to know what it does and how it works!
Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best.
1. You want the icon to enhance a word
2. You want the icon to stand alone but still be functional or informational
And our major goals here are:
1. As good of semantics as we can get
2. As little awkwardness for screen readers as possible
This ground has been treaded before, but I think the following techniques are a small step forward.
1. You want the icon to enhance a word
2. You want the icon to stand alone but still be functional or informational
And our major goals here are:
1. As good of semantics as we can get
2. As little awkwardness for screen readers as possible
This ground has been treaded before, but I think the following techniques are a small step forward.