Demonstration of the border-radius property
No, no, I will not show you simple rounded rectangles, which are pretty boring. But the same simple rounded rectangles can be folded into quite meaningful shapes. I got them in the word "twitter".
It works only in browsers on the Gecko and Webkit engines.
Looks like that:
')
But so on the other, not so cute, but readable:
But before showing a piece of layout, the culprits of this record, I want to complain to the public about the behavior of browsers, which can not be called decent.
All browsers, in one way or another, tease us with those properties that can be used right now if they can, then they are not critical. And the critical properties of CSS3 are now contraindicated, when the same border-radius does not hesitate to use many, including me.
I fully understand that CSS3 is not yet properly formatted, and scolding browsers for what they want and call the border-radius property, well, of course, talking about -moz- and -webkit-. Well, the attributes of the property are completely different, but here it is more and more seriously that the CSS3 specification is not ready.
And what's not clear why such a progressive Opera did not teach its engine to render a border-radius? Or was I looking badly and missed something? Even 10beta doesn't render — which upset me a lot.
What do you think, is it worth using non-user-friendly CSS3 charms, ignoring those sitting on other browsers, naturally, not at the expense of functionality?
Okay, enough about the theory, let's move on to practice. A couple of days ago, resting with a colleague at his home, and frankly, wrinkling with boredom, we decided to kill the time with those. to catch up on the word twitter, naturally using border-radius.
You can optimize the code for a long time, reduce the number of layers, clean and optimize styles, and so on, and so on. It is logical to build code and styles. By the way, if you pervert, you can make a cross-browser version of this typesetting, but this is an amateur, I did not have such a goal. Moreover, this at times will complicate the layout, or, if we go the other way, will hang delicate IE6 on modest, in terms of power, computers.
Well, still. of common problems, there are problems with scaling, and it’s all the same in what quantities to impose. If there is time, I will solve the problem.
Well, in action you can see on this page - http://absolvo.ru/tmp/18/ - there is both code and styles - well, everything that is necessary in general.
Or maybe we should make a service that will generate such letters, make up a couple of fonts - it will be nice and stupid - but some marginal may like it.
It works only in browsers on the Gecko and Webkit engines.
Looks like that:
')
But so on the other, not so cute, but readable:
But before showing a piece of layout, the culprits of this record, I want to complain to the public about the behavior of browsers, which can not be called decent.
All browsers, in one way or another, tease us with those properties that can be used right now if they can, then they are not critical. And the critical properties of CSS3 are now contraindicated, when the same border-radius does not hesitate to use many, including me.
I fully understand that CSS3 is not yet properly formatted, and scolding browsers for what they want and call the border-radius property, well, of course, talking about -moz- and -webkit-. Well, the attributes of the property are completely different, but here it is more and more seriously that the CSS3 specification is not ready.
And what's not clear why such a progressive Opera did not teach its engine to render a border-radius? Or was I looking badly and missed something? Even 10beta doesn't render — which upset me a lot.
What do you think, is it worth using non-user-friendly CSS3 charms, ignoring those sitting on other browsers, naturally, not at the expense of functionality?
Okay, enough about the theory, let's move on to practice. A couple of days ago, resting with a colleague at his home, and frankly, wrinkling with boredom, we decided to kill the time with those. to catch up on the word twitter, naturally using border-radius.
You can optimize the code for a long time, reduce the number of layers, clean and optimize styles, and so on, and so on. It is logical to build code and styles. By the way, if you pervert, you can make a cross-browser version of this typesetting, but this is an amateur, I did not have such a goal. Moreover, this at times will complicate the layout, or, if we go the other way, will hang delicate IE6 on modest, in terms of power, computers.
Well, still. of common problems, there are problems with scaling, and it’s all the same in what quantities to impose. If there is time, I will solve the problem.
Well, in action you can see on this page - http://absolvo.ru/tmp/18/ - there is both code and styles - well, everything that is necessary in general.
Or maybe we should make a service that will generate such letters, make up a couple of fonts - it will be nice and stupid - but some marginal may like it.
Source: https://habr.com/ru/post/61577/
All Articles