<section class="section">
<div class="section__clip">
<div class="section__content">
Link
</div>
</div>
</section>
Experiment: http://codepen.io/AgustinLarzabal/pen/OpNLvR
What i'm trying to achieve is to replicate this scrolling effect, but without repeating the content in each .section
Anyone can help me?
Related
I'm building a feature that has three circles inside of container that are next each other. Initially when I began building this feature I thought that I could just drop my circles into a flex container and they would all be good when I added media quires and resized the page.
Much to my despise that was not the case..The circles went inside of the container perfectly but when I started to resize page I noticed that they were squishing! I know this because border-radius:50% as circles need to be a percentage and when they are pressed they change there size bc they are fluid.
This issue prompted me to think of solution to prevent the circles from squishing. I had an idea of surrounding divs around the circles which would possibly stop them squishing so looked around to see if anyone had done this before.
Much to my liking I found a solution that someone had posted on STO. I modified the solution slightly to meet my own needs which works fine but there's a small issue here, I'm not sure I like the way it makes my markup look. Messy messy messy!
Solution
<!-- Projects -->
<div class="circles">
<div>
<div>
<div>
<div class="projects">
Projects
</div>
</div>
</div>
</div>
<!-- About -->
<div>
<div>
<div>
<div class="about">
About
</div>
</div>
</div>
</div>
<!-- Contact -->
<div>
<div>
<div>
<div class="contact">
Contact
</div>
</div>
</div>
</div>
Compared to my original markup there is a clear difference in the less amount of divs
Original
<div class="gridRow">
<div class="gridItem1">
Projects
</div>
<div class="gridItem2">
About
</div>
<div class="gridItem3">
Contact
</div>
</div>
I'm want to figure a way to clean up the solution markup a little more but I'm not really sure if there's a way to do that..I don't want to use svg as I just want a css solution. Any ideas?
Fiddles here
Squishing circles
https://jsfiddle.net/kapena/vmt54cd0/
Responsive Circles
https://jsfiddle.net/kapena/vmt54cd0/
Try adding these to the gridItem styles:
min-width:200px;
width:200px;
max-width:200px;
min-height:200px;
height:200px;
max-height:200px;
I've been staring at this wireframe I've made and it has me stumped on how to make it...
http://i.stack.imgur.com/ytiMf.png
The sticky jquery properties are not the problem, it's the positioning of the areas themselves given their overlapping nature that's giving me strife.
Any suggestions? Am I thinking about this the wrong way?
Like this: http://jsfiddle.net/7Fv64/
<div class="green">Hi</div>
<div class="content-wrap">
<div class="sidebar">
<div class="yellow">Hello</div>
</div>
<div class="content">
<div class="red">Stuff</div>
<div class="purple">And</div>
<div class="black">Things</div>
</div>
</div>
I'm having some issues with my CSS on a transform fold out on hover style element. At the moment it folds out too much and I'd like to reduce the height. I've tried several things to no avail. I was able to find the code itself from a demo located here: http://lab.aqro.be/fb_btn_concept.html
I've tried adjusting a lot of the #under div parameters but so far every time I get the hover state the way I want it the transition messes up and doesn't look right. I'm not very familiar with transitions so I'm hoping somebody on here can help? Here is my jsfiddle:
http://jsfiddle.net/HD2pm/
My goal is to have the fold out be around 100px in height instead of the obviously much larger version that it is at currently.
<div class="row">
<div class="span4">
<section id="btn">
<p>Some Text Will Go Here</p>
<div id="under">
<div class="logo"><div class="recto"><i class="fa fa-user"></i>Consumer</div></div>
<div class="top"></div>
<div class="logo verso"></div>
</div>
<div id="shadow"></div>
</section>
</div>
</div>
Looks a lot better with
-webkit-perspective: 550;
http://jsfiddle.net/DrQP2/
i just started using bootstrap, and i think it's awesome. but i'm having a hard time figuring out how to add a wrapper around the basic container of bootstrap.
I'm using the Fluid responsive css, and it centers the elements inside the .container nicely.
but my WHOLE page as a whole has a BACKGROUND, and i wanted a different background for the actual content area (where the container is)
So basically i have for example
<div id="wrapper-page" style="background-color:grey; ";>
<div id="wrapper-content" style="background-color:#93C;>
<div class="container">Header Contents here </div>
<div class="container">Body Contents here </div>
<div class="container">Footer Contents here </div>
</div>
</div>
</div>
Is there a simple way to achieve what i need?
I actually could easily modify the bootstrap.css file to kind of achieve what i want but i really want to keep my modifications outside of the template/framework for easy upgrade later
Why don't you make the wrapper-content also a Bootstrap .container?
<div id="wrapper-page" style="background-color:grey; " ;="">
<div id="wrapper-content" class="container" style="background-color:#93C;">
<div class="container">Header Contents here </div>
<div class="container">Body Contents here </div>
<div class="container">Footer Contents here </div>
</div>
</div>
Demo
I feel like I am not writing this correctly and this is my first layout in this nature.
I have a site that has several backgrounds that go across the whole screen. The inner containers are 960 pixels and then centered.
The only problem is every section with a different background needs its own outer and inner div.
Dabblet
http://dabblet.com/gist/2920465
Foo
<section class="hero">
<div class="hero-container">
Hero content
</div>
</section>
<section class="popular">
<div class="popular-container">
Header content
</div>
</section>
<div class="main">
<div class="main-container">
Main content
</div>
</div>
<footer>
<div class="footer-container">
Footer content
</div>
</footer>
So far the code looks ok. It's too simple to go wrong. Only thing for now i would change is the 5 classes
.header-container,
.hero-container,
.popular-container,
.main-container,
.footer-container
merge into one class inner-section-container and apply this class to the corresponding elemnts instead, as for now you do for all this classes the same thing.