We’ll hide it initially:īackground:transparent url(./images/bg_menu.png) repeat top left We will give it a fixed width and height and a semi-transparent dark background. Next step is to style the content wrapper. Read more about transitions in the W3 working draft at or in this great article on A List Apart by Dan Cederholm: Understanding CSS3 Transitions. The link elements inside of the menu container will be black boxes with a neat transition on hover: The menu container will be placed absolutely to the left side of the screen: The main heading will also be positioned absolutely and we will use a font-face from the collection of Google Web Fonts:įont-family:"Astloch", Arial, sans-serif 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 kommentar(er)
