Blog
Using Chrome Developer Tools to Modify CSS
or: How I Learned to Love the !important Every site that you visit uses CSS. If it didn’t, it would look like plain black words on a flat white background with text left aligned to the side of your browser and no gutter, padding, or color to speak of. Even in an attempt to emulate a plain paper book, CSS should still be present in order to properly display the words you’re presenting. When you first look at CSS, it can seem exceedingly simple and easy to control, requiring nothing but an identifier and a key and value pair in order to specify which item should look which way. This deceivingly simple appearance can end up frustrating many front end designers trying to modify a site’s facade. CSS stands for Cascading StyleSheet. This acronym hints at one of the frustrations that I’ve found new designers have. To get into it,
Starting Out With the Flexible Box Model
Flexible Box Model, or Flexbox, is a CSS3 technique for styling web pages. This layout mode provides a simple and easy way to create your theme without messing with floats or attempting to style your boxes to be the same height. The Flexible Box Model will help you unify your layout, and even provide you with solutions that do not require addition, subtraction or determining the percentage of width for a certain object. This technique could be extremely beneficial if you’re attempting to design a responsive website. We’ll start with one simple <section> that will be the container for our flexible boxes: 123<section id="parentbox"> </section> I’ve written this article for Cequix Technology Solutions. You may read the rest of this article on the Cequix blog
Multiple Background Images with CSS3
Utilizing multiple background images with CSS3 It has been a long-time dream of many web developers to have multiple images as a background for one div. There are numerous benefits to this, but one of my favorites is the repeating gradient with an image layered on top. Yes, you can achieve this by creating a whole bunch of extra <div>s and ensuring that the styling is correct in so many different places. Then, all you have to do is keep hoping against hope that one floating <div> or an absolute placement doesn’t mess everything out of whack. To get the job done a lot quicker and easier, simply use comma separated arguments: 12345.complicated_bg{ background-image: url("../image/one_img.jpg"), url("../image/bg_gradient.jpg"); background-position: center top, left top; background-repeat: no-repeat, repeat-x; } Notice that the image you want layered on top is positioned first in this. In order to place multiple images over one
Styling Placeholder Text with CSS
Styling placeholder text for input fields on your websites is rather difficult without the proper tools. Placeholder text is currently only used with a few browsers, but you will want to use the following code to address each browser.