Here is a technique about how you can absolute center position an element on the horizontal and vertical in CSS.
Center Images Horizontally
To center something on the horizontal in CSS it's quite easy all you need to do is set the width on the element and apply an auto margin-left and margin-right on to the image. The browser will work out the exact margin on both the right and left side of the image. This will position the image in the center of the parent element just by using the width and the margin properties.
Here is a quick tip on working with width's in CSS. There are multiple things that make up the width's of the HTML elements, the width, the padding and any borders on the element.
Total Width = Width + Padding + Border.
This means that if the width of the element is 500px with a padding of 50px and a border of 10px the total width of the element is 620px.
A device which lots of your visitors will use to access your website are iPhone and iPads. You can't ignore how important it is to allow users of these devices easy access to your site.
There are a few ways you will do this, one of them is responsive design. Use media queries to define how the website looks on these devices.
Another thing you need to do for the apple devices is to define the apply touch icon in your head tag. This is a tag that defines an icon to use when on web clips. Web clips is a feature on apple devices to to display an icon on the home screen of iOS for the website.
To define the icon to use for the apple-touch-icon is done the same way as you define the favicon.
The default size of the icon should be 57px x 57px.
As some of the devices are different with retina displays you might want to define a different icon for different devices, if so use the following snippet.
On these icons iOS will add special effects to the icons such as rounded corners, drop shadows and reflected shines. If you don't want iOS to add these effects to the icons then you have to define the icon as precomposed.
Webkit have lots of experimental CSS properties that you can currently use on your website, one of the properties we are looking at now is the text-security property.
This CSS property allows you to change the the shape of the letter that are displayed in text input boxes.
When the visitor types in a input password text box all the characters they type are converted into shapes to hide the password. But if you don't want to use a password input type then you have to use a text box but then people can see what your typing in.
This is where the -webkit-text-security property comes in you are able to style your textbox to be just like a password input type.
-webkit-text-security: value;
circle
disc
square
none
This property currently only exists in webkit browsers so you will only be able to see this in Chrome and Safari browsers.
Back in the early days of the website there was a magically HTML tag which you would see everywhere...this tag is the marquee tag.
This was used on almost every website, if you don't know about this tag or don't remember it, then basically this tag will make any text you add inside it to scroll across the screen. You can variable the speed and direction the text moves across the screen.
Many people got annoyed with this tag and thankfully has been deprecated from the html specification.
But someone developing at webkit missed this tag so much they decided to build a webkit CSS property to create a marquee, which can be used as below.
-webkit-marquee: direction increment repetition style speed;
As it is a webkit property it can only be used on chrome or safari browsers.
The marquee property takes 5 parameters:
Direction - Defines the direction of the marquee you have the choice of, ahead, auto, backwards, down, forwards, left, reverse, right and up.
Increment - Defines the distance the marquee travels per loop.
Repetition - This is the number of times it loops around. If you want it to be infinite you can just use the value infinite.
Style - This defines the style of the motion on the marquee, alternate, none, scroll, slide.
Speed - This defines how fast the marquee will scroll fast, normal, slow
View the demo page to see the different effects created with -webkit-marquee.
.marqueeLeft {
overflow-x: -webkit-marquee;
-webkit-marquee: left large infinite slide slow;
font-size:1.8em;
}
.marqueeAhead {
overflow-x: -webkit-marquee;
-webkit-marquee: ahead large infinite slide slow;
font-size:1.8em;
}
.marqueeAuto {
overflow-x: -webkit-marquee;
-webkit-marquee: auto large infinite slide slow;
font-size:1.8em;
}
.marqueeBackwards {
overflow-x: -webkit-marquee;
-webkit-marquee: backwards large infinite slide slow;
font-size:1.8em;
}
.marqueeDown {
overflow-x: -webkit-marquee;
-webkit-marquee: down large infinite slide slow;
font-size:1.8em;
}
.marqueeForwards {
overflow-x: -webkit-marquee;
-webkit-marquee: forwards large infinite slide slow;
font-size:1.8em;
}
.marqueeReverse {
overflow-x: -webkit-marquee;
-webkit-marquee: reverse large infinite slide slow;
font-size:1.8em;
}
.marqueeRight {
overflow-x: -webkit-marquee;
-webkit-marquee: right large infinite slide slow;
font-size:1.8em;
}
.marqueeUp {
overflow-x: -webkit-marquee;
-webkit-marquee: up large infinite slide slow;
font-size:1.8em;
}
With some of the new graphical features you see in CSS3 it can start to add more and more effects to your HTML elements the same way you used to have to use photoshop to do.
Things like box shadow and color gradients are now so easy to do in CSS that you don't even need photoshop anymore. Here is another CSS property that you might not realise existed but it's another effect you would normally do in Photoshop and that's adding a stroke around text, just by using the CSS property text-stroke.
Currently this property is only supported on webkit so it will only work on Chrome or Safari, and you can only use it by prefixing the property with -webkit-.
-webkit-text-stroke: <width>
<color>;
This accepts two values the width of the stroke and the colour of the stroke.
This property now allows you to create a cool outline of any font you are using on your website.
As you can see from the above examples is that we have also added another webkit property -webkit-text-fill-color. This property will overwrite the text color with this value. This means that we can set the text color to be something default and this is what the other browsers will see.
Then adding the -webkit-text-fill-color will overwrite the color so we can now use the -webkit-text-stroke to add the webkit stroke.
View the demo to see these affects in different browsers.
On some CMS systems it allows users to directly edit content on the page so that they can preview the change immediately on screen. The way they do this is with Javascript to change any selected paragraph into a textarea and add the paragraph text into this textarea.
But there is a better way you can do this with just CSS, there is a new CSS property which will allow the user to edit the HTML content on-screen.
This property is -user-modify which will change the element to allow the user to edit the content, this is currently only supported on Webkit and Firefox browsers.
The way this can be used in a CMS page is for admin user to preview a page of their content on the real page and not in a text editor. Then allow the admin user to click on a paragraph, you can then add the -user-modify CSS property to the clicked element. When this element loses focus you can grab the changed content and use AJAX to update the database with the new content.
I've recently just found this interesting CSS property that allows you to style any element you want as a browser default element.
Each browser has there own default styling for the standard HTML elements you can find on a page, for example a button in Chrome will look different than a button in Firefox.
With this CSS property you apply this to any HTML element and it will look like the default element in that browser. You can now style that anchor tag link to look exactly like that button, or make a paragraph look like a textbox.
All you have to do is use the CSS property -appearance.
This is currently only supported in webkit and firefox browsers so you need to prefix the property with the browser prefixes.
<p class="lookLikeAButton">This is a paragraph
<p class="lookLikeAListbox">This is a paragraph
<p class="lookLikeAListitem">This is a paragraph
<p class="lookLikeASearchfield">This is a paragraph
<p class="lookLikeATextarea">This is a paragraph
<p class="lookLikeAMenulist">This is a paragraph
All you need to do is use a CSS selector class of ::selection and define the style to use on your text when a visitors tries to highlight the test.
But what if you want to do the opposite and want to disable your visitor from highlighting the text all together?
There is an experimental property called user select which will allow you to define new instructions when the visitor tries to highlight your content. This feature can be a good way of making it harder for people to highlight your content and copy it into their own website.
All you have to do is use this CSS property.
.disable_text_highlighting {
-webkit-touch-callout: none;
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
The values on this property are:
Auto - Visitors can select all content in the element.
None - Selecting content is disabled.
Text - Can only select text content.
Browser Support
This is currently support on webkit, firefox and IE 10. To use the property you need to prefix it with the different browser prefixes but you should also place the non-prefixed version to future proof the property.
In this snippet we are looking at what you can do with the CSS background-size property. This property will allow you to define the size of the image that you have defined as the background image, similar to how you will use the width and height when adding an image.
The value of the background-size property can either be:
Contain - This specifies that the image should be scaled to as large as possible while being less or equal to the background of the element.
Cover - This specifies that the image should be scaled to as small as possible while being greater or equal to the background of the element.
Percentage
Length
Auto
Therefore to make the image cover the entire background of the HTML element you will need to use the cover value just like the snippet below. Continue reading »