{"id":46833,"date":"2019-10-19T03:01:21","date_gmt":"2019-10-18T17:01:21","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46833"},"modified":"2019-10-20T11:55:16","modified_gmt":"2019-10-20T01:55:16","slug":"device-width-specific-css-webpage-styling-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/device-width-specific-css-webpage-styling-primer-tutorial\/","title":{"rendered":"Device Width Specific CSS Webpage Styling Primer Tutorial"},"content":{"rendered":"
\"v\"<\/a>

Device Width Specific CSS Webpage Styling Primer Tutorial<\/p><\/div>\n

Take a look at the CSS styling snippet below … <\/p>\n


\n<style>
\n
\n.glow {
\n -webkit-animation: glow 1s ease-in-out infinite alternate;
\n -moz-animation: glow 1s ease-in-out infinite alternate;
\n animation: glow 1s ease-in-out infinite alternate;
\n }
\n
\n\/* Thanks to https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text *\/
\n
\n@-webkit-keyframes glow {
\n from {
\n box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
\n }
\n
\n to {
\n box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
\n }
\n}
\n
\n@media only screen and (max-width: 768px) {
\n #widget2 {
\n -webkit-animation: glow 5s ease-in-out infinite alternate;
\n -moz-animation: glow 5s ease-in-out infinite alternate;
\n animation: glow 5s ease-in-out infinite alternate;
\n }
\n}
\n
\n@media only screen and (max-width: 480px) {
\n #widget2 {
\n -webkit-animation: glow 4s ease-in-out infinite alternate;
\n -moz-animation: glow 4s ease-in-out infinite alternate;
\n animation: glow 4s ease-in-out infinite alternate;
\n }
\n}
\n
\n@media only screen and (max-width: 320px) {
\n #widget2 {
\n -webkit-animation: glow 3s ease-in-out infinite alternate;
\n -moz-animation: glow 3s ease-in-out infinite alternate;
\n animation: glow 3s ease-in-out infinite alternate;
\n }
\n}
\n<\/style>
\n<\/code><\/p>\n

Apart from the “glow” ideas we last talked about with WordPress Blog TwentyTen Theme Glow Tutorial<\/a>, that being the “what” of what we are doing, “where” are we applying it? Anyone, anyone<\/a>? Yes, Casper Brindle<\/a>, we’re differentiating “what” to do by device width.<\/p>\n

And the “@” in CSS indicates a “rule”. So … yes, Casper Brindle? Indeed, they are called CSS @media Rules<\/a> but no, Casper, it does not cover “Netflix After 10” rules, OK?<\/p>\n

And so, on our RJM Programming Landing Page<\/a> set of HTML\/Javascript\/CSS “Software Need Not Be Hard” will glow for a lot of mobile users, and very few laptop users. As you can imagine, the use of such CSS can be invaluable.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n