Search the Community
Showing results for tags 'CSS3'.
Found 2 results
-
In the old days, we had to go to Photoshop (or some other image editor) to create rounded PNG or GIF files, to create images that were round. Now you can do this with simple CSS3 applied to your image: style="border-radius: 50%;" So the CSS applied would look something like: <img style="border-radius: 50%" src="stefan_mischook-150x150.png"/> Stef
-
Good Evening Reader, I'm relatively new to the world of web design and need some pointers on a design that I've drawn up for practice. Up til now, my websites have been relatively plain and straight forward. However, in this highly competitive field I felt that I should begin to get my weight up and try and hang with my competition. So the idea that I had was to work on creating an HTML5 site with a UI that responds similarly to a Flash/ActionScript UI. I have a picture of the PSD Mock-up I created but I don't know how to display it here. If any of you know how and would like to tell me, please let me know. The homepage has a very simple look. The logo of the company that I'm practicing with is diamond-shaped so imagine a webpage with a 960px wide wrapper centered on the screen. In the header is the company's long logo and in the center of the content area is just the diamond-shaped logo with a linkable image on all four sides. The images are square-shaped with the corner under the diamond cut off and a 25px gap between it and the diamond. A 50px gap between the boxes themselves. Hopefully this isn't too hard to imagine. Here's my problem. I would like each box to serve as the main content area for the page it links to. I'm not suggesting that once clicked it goes to another page. That's simple and actually is what the current site does now. No, instead, I want the box to grow and transition to white background. During the transition, the image which was displayed in the box goes away and page information is displayed. I need it to function like a normal website at this point...sort of. I mean this in the sense that I want to display a sidebar and main content in the expanded box. When a link is clicked, the current content fades out and the new content fades in. I still haven't thought come up with a way to get back to the homepage without actually having to reload the page all over again. Now once the blocks are created, it is my opinion that I could achieve the effect of moving through pages by simply placing all the page contents in a div and as the links are clicked, simply hide one div and display the next using css and maybe a touch of javascript. However, I have no clue as to how to create my boxes to begin with. I had thought about using the canvas tag but I wasn't sure how well that could be manipulated so I decided to come here for help. I hope I wasn't too wordy in my explanation but I thought it best to paint the scene for what I'm trying to accomplish. And let me remind you, I'm new to this. I don't know javascript but I have worked with it before, just haven't written it. I decided to practice with this design in hopes that I could learn several techniques at once, javascript being one of them.
