Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,148,899 members, 7,802,910 topics. Date: Saturday, 20 April 2024 at 03:03 AM

Another CSS Challenge - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Another CSS Challenge (1014 Views)

Write HTML And CSS Codes On Android Devices / Finally, Another CSS Challenge. Who Can Code This Layout? / How To: Create A Simple Hover Button With Html And Css (2) (3) (4)

(1) (Reply) (Go Down)

Another CSS Challenge by GraphicsPlus(m): 3:03pm On May 31, 2013
Ok. here is another challenge for us.
Look at the attached image very well.
I want us to code it as it is.

Note:
1. The circle where the pix is residing will not be an image. Only the pix will be image.
2. The circle background color carrying the social icons are not images. But the 'f', 'bird' and 'youtube' are white icon images. (I attached them here so that u can use them.)
3. You will have to position the social icons as they are in the attached image.
4. After designing it, I want a situation where if a user uses ctrl- to zoom out to the last percentage, the whole work will still align perfectly and not scatter.
5. The width will be at most 600px. The width of the text will be wider than the width of the image. So there will be 3 different widths. A width for the wrapper (600px), a width for the image and a width for text. The footer and the wrapper will have same width.
6. You can design at codepen.io or jsfiddle.net or you can upload to ur website and paste the link. Dont paste raw codes here.
7. I want a situation where if a user hovers on any of the social icons, it will slide up a bit.
8. I want a situation if a user hovers on any of the social icons, the big background color of the circle where the human picture is will change to the background color of that particular icon hovered.
9. I want it to be responsive. You will test it at mobiletest.me and make sure it's showing perfectly on 240px screen resolution.

Goodluck.

Re: Another CSS Challenge by yawatide(f): 4:05pm On May 31, 2013
This one pass "challenge" o, he he. Also, why are you so obsessed with "when I hover over something, it's color will change to reflect the background of the container""? tongue

1 Like

Re: Another CSS Challenge by GraphicsPlus(m): 4:16pm On May 31, 2013
@Yawa, u know hover effect gets user's attention. Have ever seen urself in a website hovering over some certian images or boxes to see if there is any hidden reaction that will trigger? grin
Re: Another CSS Challenge by yawatide(f): 7:08pm On May 31, 2013
OP:
You owe me o. I was about to go no lunch break when something kept me on my seat and forced me to work on this till I was somewhat complete.

Now:
1) I have no access to a server so please forgive me pasting this here. For the pix, I just used an image I got online. Feel free to substitute with yours

2) I didn't do the background color switching. This has been done elsewhere today. Feel free to reuse code from there and apply it here.

3) My code works for firefox only. Feel free to add the other browser-specific properties

4) I no get time (sorry) to code 3 separate social media icons o. Just see the one I have there and you can replicate for the rest

5) The only "problem" I am experiencing now is the responsive part, given I am still learning it. All the same, what I did was ensure that it shrunk but that it didn't expand beyond 600px, per your specs


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>NL Test</title>
<style>
.rad {border-radius: 50%;}
#test-container { width: 100%; max-width: 600px; }
#circle-container { margin: 0 33%; font-size: 1em; }
.circle { position: relative; width: 100%; height: 200px; background: #00f url(samsung.png) no-repeat 50% -450%; }
.mini-circle { color: #fff; position: absolute; width: 10%; background-color: #0f0; bottom: -5%; left: 50%; text-align: center; font-weight: bold; -moz-transition: bottom 0.3s ease-out; }
.mini-circle:hover { cursor: pointer; bottom:-3%; }
#footer { background-color: #00f; color: #fff; text-align: center; padding: 10px; }
</style>
</head>
<body>
<div id="test-container">
<div id="circle-container">
<div class="circle rad">
<div class="mini-circle rad">f</div>
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
Re: Another CSS Challenge by Yinksey(m): 8:58pm On May 31, 2013
Ops not on a computer,when am on a computer i will try to post my solution.
Re: Another CSS Challenge by GraphicsPlus(m): 9:09pm On May 31, 2013
@Yawa, u tried. But nope, you didnt get it.
Re: Another CSS Challenge by GraphicsPlus(m): 9:09pm On May 31, 2013
@Yink, i trust u.
Re: Another CSS Challenge by yawatide(f): 9:50pm On May 31, 2013
OP:
Didn't get it as in, "the only right solution is the one i've come up with", or as in, "there is only 1 solution to this and your isn't the one", or as in, "yours is not right cos it's not the most efficient"?
Re: Another CSS Challenge by GraphicsPlus(m): 11:37pm On May 31, 2013
@Yawa, you didnt get it becos you didnt follow the instruction very well. It's easy to just put one icon there. I want three of them. Again, ur work it's not looking good in 240px screen resolution.
Re: Another CSS Challenge by nollyj: 5:36am On Jun 01, 2013
I decided to try this out. Not sure if my approach is quite good but it worth the time spent. The link to my demo is here http://toscanyacademy.com/testing/

Find the code here

http://toscanyacademy.com/blog/admission-news-nigeria/learning-how-to-code
Re: Another CSS Challenge by GraphicsPlus(m): 6:06am On Jun 01, 2013
@Nolly, you tried. At least I like the way you walked around it. You tricked the browser by stacking the human image into three. There is always another way to kill a rat. But why not use one human image instead of stacking them into three. Well, you may say, it's not necessary so long you achieved your purpose. I tend to agree with you.

It's ok. Now your work is not responsive at all. And the circle carrying the human face seems to be acting funny on small screen. Now see the two images below. They are how your work looks in 240px screen and 320px screen resolutions.

Can you do something about it? I want it to look the same in every resolution or at most slightly different. Again, I dont want horizontal scroll bar at all.

Re: Another CSS Challenge by yawatide(f): 6:49am On Jun 01, 2013
OP:
He he, e go tough o. I dey feel kind of lazy these days. Na so I dey do for work. I give you one and you use that to work with the rest. So far, so good.
Re: Another CSS Challenge by GraphicsPlus(m): 6:57am On Jun 01, 2013
@Yawa, am not looking for half solution. Am even struggling to get it working myself. I need someone that will code that stuff as it is.
Re: Another CSS Challenge by nollyj: 11:46am On Jun 01, 2013
GraphicsPlus: @Nolly, you tried. At least I like the way you walked around it. You tricked the browser by stacking the human image into three. There is always another way to kill a rat. But why not use one human image instead of stacking them into three. Well, you may say, it's not necessary so long you achieved your purpose. I tend to agree with you.

It's ok. Now your work is not responsive at all. And the circle carrying the human face seems to be acting funny on small screen. Now see the two images below. They are how your work looks in 240px screen and 320px screen resolutions.

Can you do something about it? I want it to look the same in every resolution or at most slightly different. Again, I dont want horizontal scroll bar at all.

I will fix the responsive part. I did it in chrome and did not test it on mobile. When I reduce my screen size in chrome to device size, it works fine so I thought it will also work in mobile that is my fault. When I have time today I will work on the responsive issue.

That one might be easier than working around the hover effect because I think a little media query will solve the issue.
Re: Another CSS Challenge by GraphicsPlus(m): 11:50am On Jun 01, 2013
Ok. use mobiletest.me to check it in different screen resolution.
Re: Another CSS Challenge by bigdot1759(m): 12:18pm On Jun 01, 2013
GraphicsPlus: Ok. here is another challenge for us.
Look at the attached image very well.
I want us to code it as it is.

Note:
1. The circle where the pix is residing will not be an image. Only the pix will be image.
2. The circle background color carrying the social icons are not images. But the 'f', 'bird' and 'youtube' are white icon images. (I attached them here so that u can use them.)
3. You will have to position the social icons as they are in the attached image.
4. After designing it, I want a situation where if a user uses ctrl- to zoom out to the last percentage, the whole work will still align perfectly and not scatter.
5. The width will be at most 600px. The width of the text will be wider than the width of the image. So there will be 3 different widths. A width for the wrapper (600px), a width for the image and a width for text. The footer and the wrapper will have same width.
6. You can design at codepen.io or jsfiddle.net or you can upload to ur website and paste the link. Dont paste raw codes here.
7. I want a situation where if a user hovers on any of the social icons, it will slide up a bit.
8. I want a situation if a user hovers on any of the social icons, the big background color of the circle where the human picture is will change to the background color of that particular icon hovered.
9. I want it to be responsive. You will test it at mobiletest.me and make sure it's showing perfectly on 240px screen resolution.

Goodluck.
guy pls is that css of macro media dreamwaver and pls don u have joomla setup?
Re: Another CSS Challenge by yawatide(f): 1:32pm On Jun 01, 2013
OP:
Oh, is this some kind of job you have that you want us to code for you and you get all the money? tongue
Re: Another CSS Challenge by GraphicsPlus(m): 3:57pm On Jun 01, 2013
@Yawa, no. we are having fun.
Re: Another CSS Challenge by GraphicsPlus(m): 4:51pm On Jun 01, 2013
Ok. It seems we are all busy. Here is mine. I must confess that it was not easy. Especially making it responsive. You know absolutely positioned elements are always tough to make responsive. It was a kind of battle. I did lots of pixel adjustment and browser refreshing to get a good one. I think I tried a bit.
Check it out: http://www.ctrlshiftstudios.com/about

Check below images to see how it looks in 240px, 320px, 480px and 640px screen resolutions.

Thank you all.

Re: Another CSS Challenge by nollyj: 5:54pm On Jun 01, 2013
@GraphicsPlus,Nice job. I am working on the responsive issue. Will see how it goes.
Re: Another CSS Challenge by nollyj: 6:31pm On Jun 01, 2013
I went and made the circles with social icons responsive. Not the best but this is what time can allow me to do now.

http://toscanyacademy.com/blog/admission-news-nigeria/learning-how-to-code

Re: Another CSS Challenge by GraphicsPlus(m): 6:55pm On Jun 01, 2013
Well done @Nollyj. You are the winner.

1 Like

Re: Another CSS Challenge by adewasco2k(m): 8:39pm On Jun 01, 2013
Wow this wasn't easy at all grin kudos to nollyj, yawa-ti-de etc
Re: Another CSS Challenge by yawatide(f): 11:59am On Jun 02, 2013
Yep, kudos to all. All in all, it was a challenge worth skipping lunch for cool

(1) (Reply)

Naijaloaded As Been Hijack / Bloggers I Need Your Help With My Wordpress Blog / Make More Than N100,000 On Twitter Easily With Addynamo

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 68
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.