![]() The little boxes will all have a height and width of 50 pixel and they will have absolute positioning: They will both be of fixed positioning and we will give them a low z-index so that they really stay under everything else. Next, we will define the styles for the image that we will use as a background and the overlay pattern:īackground:transparent url(./images/pattern.png) repeat top left Now, let’s make it pretty! The CSSįirst, we will embed our reset.css that will reset all the basic styles, and we’ll define some main url('reset.css') įont-family: 'PT Sans Narrow', Arial, sans-serif One of the content elements is going to contain a list of images:Īnd that’s all the HTML. There will be a main wrapper with the class “mb_content_wrapper” which contains all the content containers that have the class “mb_content” and a span for the closing cross: Next, we will define the structure for the content area. Read more about these new custom data attributes of HTML5 on John Resig’s blog: HTML 5 data- Attributes The menu and the heading will have the following HTML stucture:Īs you can see, we will add two “data-” attributes that we’ll use to define the speed and the easing effect that will be associated to the animation of the boxes. We will place a total of 16 boxes (div elements) into this container. The next div element will be used to add the little boxes with their random position and rotation degree First, we want to place the background image with the grid overlay:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |