Each website has a color scheme which identifies itself. By looking at one color, we can know which website it is for. These color schemes can be identified from their logos, nav-bars, background etc. We collect some color schemes for some famous Chinese websites.Alibaba (#f90) Baidu (#0000cc) Huawei (#e30a12) HTC (#69b40f) JD (#c91623) Renren (#105ba3) Sina (#e4351e) Sohu (#fdd000) Taobao (#ff4400) Tencent (#0397de) Tmall (#b10000) WeChat (#5ba607) Xiami (#f39200) Zhihu (#0078d8) 163 (#333) 36Kr (#146fb9) 360 (#48...

Both CSS3 animation and CSS3 transition can be used to transition an element in a webpage. They can be used to transition some CSS properties within a given period of time. They have many similarities. They do have a few differences as well. So an user needs to understand the differences between them in order to better use them in different scenarios.First, let's see an example on how to change the width of a div from 100px to 200px within 2 seconds when hovering on it.With CSS3 animation , the CSS looks like :@keyframes anim { from {width : 100px;} to {width : 200px;}}#div{ width:100px; heigh...

About a year and a half ago, I wrote about CSS3′s word-wrap property. The angle of the article was the fact that it was a feature that was new in CSS3 that didn’t exist in CSS2.1 and it worked in just about every browser, including old IE.Well, now that’s all changed, which I discovered while researching additions to my CSS3 Click Chart. The word-wrap property has been removed from the CSS3 spec and other related properties have been added.Text-WrapThe text-wrap property “specifies the mode for text wrapping”. Well, that description doesn’t tell us a whol...

CSS has two very important properties on determining the position of an element in webpage: display and position. display is used to determine how elements are grouped and displayed on the page. While position is used to determine the exact position of an element on a page. And this post would explain position property in detail.position is used to determine the exact position of an element on a page. It has five possible values.staticrelativeabsolutefixedstickysticky is supported starting from 2017 in browsers and it would be explained more later.staticstatic is the default value of the posit...

BonBon ButtonsZardiCSS3 Buttons With Simple MarkupFancy Buttons10 Nice CSS3 ButtonsCSS3 Animated Bubble ButtonsSuper Awesome Buttons with CSS3 and RGBAPretty CSS3 ButtonsGitHub-Style CSS3 ButtonsWe Love ButtonsSexy ButtonsRealistic CSS3 ButtonsSource:http://sd.csdn.net/a/20110513/297781.html...

calc function is a function introduced in CSS3, it can be used to calculate length values. There are a few good features which make it suitable for aligning an element vertically.One good part is that the operands can have different units like percentage, px, rem etc. This makes it very flexible when calculating the length value. One example:.rect{ margin-top:20px; height:50px; background:green; width:calc(100%-20px);}Here the left operand uses percentage while the right one uses px, they can work perfectly without any conflict.The result of calc is dynamic but not pre -calculated....

When using CSS to set the position of DIV, we may often get confused with the 4 position properties : static, relative, absolute and fixed. If we don't understand them correctly, we may often get unexpected result. Here we make some analysis to them.The definitions of these 4 properties:static : The default position property. It has no position actually. The element will appear where it should be (top, bottom, left, right or z-index has no use here)relative : This one will position relative its normal position. We can use top, bottom, left and right to position relative to its normal position....

Sometimes when we do CSS on HTML elements. We may want to hide some text when the text in a specified box overflows. Usually, we can use a CSS property overflow:hidden to hide the text so that the format of the whole element will not be affected. But will it always work?I believe some of us may encounter problems when we want to hide some text in a table td cell with specified width. If we use td { overflow:hidden;}, it is supposed to hide the text if the text in a td cell overflows. But the fact is that it will fail to work.The outcome will be the height of the td cell will increase so that t...