{"id":11470,"date":"2022-01-27T10:00:00","date_gmt":"2022-01-27T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=11470"},"modified":"2022-01-27T10:18:07","modified_gmt":"2022-01-27T01:18:07","slug":"css-tricks-for-web-designer","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/11470","title":{"rendered":"CSS tricks for web designer"},"content":{"rendered":"\n

— Absolute positioning<\/strong><\/p>\n\n\n\n

If you want to define where an element is placed on the website at all times, absolute positioning is the key to make this happen. Absolute positioning allows you to control exactly where an element will stay. And then use top, right, bottom and left, accompanied by a pixel value to control the place.<\/p>\n\n\n\n

position:absolute;\nbottom:10px;\nright:10px<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
The CSS above sets the position of an element to stay 10px from the bottom and right edges of the browser. <\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
— Use a CSS preprocessor<\/strong><\/p>\n\n\n\n
Use Less or Sass or SCSS when you develop the website. They can help you declare colors, sizes, etc one single time, and create CSS with for cycles and similar things. <\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
— Link states<\/strong><\/p>\n\n\n\n
The :link<\/em> pseudo-class controls all links that haven\u2019t been clicked on yet. The :visited<\/em> pseudo class handles the styling of all of the links you\u2019ve already visited. This tells website visitors where they have already been on the site, and where they have yet to explore.<\/p>\n\n\n\n
a:link { color: blue; }\na:visited { color: purple; }<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
— Resize images to fit<\/strong><\/p>\n\n\n\n
Sometimes  images are needed to fit a certain width, while scaling proportionally. An easy way to do this is to use max width to handle this. <\/p>\n\n\n\n
Here is an example:<\/p>\n\n\n\n
img {\n    max-width:100%;\n    height:auto;\n}<\/code><\/pre>\n\n\n\n
— Split HTML and CSS<\/strong><\/p>\n\n\n\n
It is the best idea of creating different CSS files<\/strong> (for example, one for desktop and one for mobile) while developing, and only, in the end, merge them.<\/p>\n\n\n\n
The same principle can be made with HTML. If you\u2019re not developing in SPA environments, you can use PHP to include and require pieces of HTML code.<\/p>\n\n\n\n
<\/p>\n\n\n\n
— Direct children<\/strong><\/p>\n\n\n\n
Use ><\/em> to select the direct children of an element. <\/p>\n\n\n\n
#footer > a<\/code><\/pre>\n\n\n\n
This will select and style all of the active link elements that are immediately under the Footer ID.<\/p>\n\n\n\n
<\/p>\n\n\n\n
—  :before<\/strong><\/p>\n\n\n\n
This CSS is a selector that allows you to choose a CSS element and insert content before every element with a specific class applied to it. <\/p>\n\n\n\n
h3:before { \n    content: \"More: \";\n<span class=\"new-blog\"> color: #F00;<\/span>\n}<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
— :after<\/strong><\/p>\n\n\n\n
Like the :before selector,  :after can be used to insert content globally on specific elements. A practical use would be adding \u201csee more\u201d after every excerpt on an article . You can do like this:<\/p>\n\n\n\n
p:after{ \n    content: \" -Read more\u2026 \";\n    color:#f00;\n}<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
By Tsuki<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>