I'm struggling to find a solution about achieving this particular effect:
The tricky part is that I need the circle and the rectangle to be 2 separate elements because they will contain child nodes.
I've tried various ways, including borders with transparent colors, shape- properties, element positioning trickery etc. Unfortunately, none of my trials yielded even at least approximate results. I just can't seem to be able to wrap my head around this and I can't find any examples on the web as well. The closest I got to was this thread.
Any help would be much appreciated. Thanks!
Using radial-gradient you can easily do this:
.rect {
margin-top:50px;
height:120px;
background:radial-gradient(circle at center,transparent 100px, green 100.5px);
}
.circle {
margin:-150px auto 0;
width:180px;
height:180px;
background:green;
border-radius:50%;
}
html {
background:linear-gradient(to right,pink,white);
height:100%
}
<div class="rect">
</div>
<div class="circle">
</div>
Related
I'm working on an image that rotates around a circle. As my image rotates around the circle I would like for it to grow as it rotates. I'm using the example shown in
Circular Motion example
TweenMax.to(['#logo'], 10, {bezier:[
{x:"250px",y:"-40px"},
{x:"500px",y:"250px"},
{x:"250px",y:"500px"},
{x:"0px",y:"250px"},
{x:"0px",y:"0px"},
],repet:2,ease:Linear.easeNone});
body{
background-color:#fff;
}
#logo{
position:absolute;
left:0;
top:0;
}
.circle{
position:relative;
width:500px;
height:500px;
border:1px solid #000;
border-radius:50%;
margin:0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="circle">
<img id="logo" src="http://gravatar.com/avatar/5a224f121f96bd037bf6c1c1e2b686fb?s=80">
</div>
My example is below but it doesn't work
TweenMax.to(['#logo'], 10, {bezier:[
{x:"250px",y:"-40px", scale:0.2},
{x:"500px",y:"250px"},
{x:"250px",y:"500px"},
{x:"0px",y:"250px", scale:0.8,},
{x:"0px",y:"0px"},
],repet:2,ease:Linear.easeNone});
In order to use the 'bezier' attribute you need to include the morph gsap plugin.
https://greensock.com/docs/Plugins/MorphSVGPlugin
I also found some brackets mistakes and 'repet'.
Keep in mind the [] selector for the element is only necessary when you want to animate more than one different element.
I also think you can't change scale inside the bezier attribute, I also recommend to use the pathDataToBezier in order to get the path, instead of hardcoding it I mean.
Hope it helps, gsap it's lots of fun.
TweenMax.to('#logo', 10, {bezier:{
{x:"250px",y:"-40px"},
{x:"500px",y:"250px"},
{x:"250px",y:"500px"},
{x:"0px",y:"250px"},
{x:"0px",y:"0px"},
}, scale: 0.8, repeat:2,ease:Linear.easeNone});
I've noticed that when using mix-blend-mode the result is different than when using background-blend-mode even though you're using the same blending mode.
For example, compare the 2 results below:
I've copied in my setup and JSFiddles below:
HTML
<div class="background">
<div class="overlay"></div>
</div>
CSS
.background{
width:200px;
height:200px;
//background-color:green; //toggle depending on what you want to use
background-blend-mode:soft-light;
background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
background-size:cover;
}
.overlay{
width:100%;
height:100%;
background-color:green; //toggle depending on what you want to use
mix-blend-mode:soft-light;
}
JSFiddle
Using mix-blend-mode: https://jsfiddle.net/p8gkna87/
Using background-blend-mode: https://jsfiddle.net/p8gkna87/1/
Some background information
I'm currently replicating a photoshop design which uses the soft-light blending mode and at the same time also uses an opacity of 51%. So it wouldn't be able to use background-blend-mode as the opacity cannot be applied to the same object.
background-blend-mode blends with its background-image and its background-color.
mix-blend-mode blends with its backdrop, the part what is behind itself, and its background-color.
Here is an article describing mix-blend-mode quite well:
http://alistapart.com/article/blending-modes-demystified
Put in another way, and in your case, with your mix-blend-mode you blend a green color on top of the image, with your background-blend-mode you do the opposite.
So by having the same layer order, both blend-modes look the same
.background,
.background2{
display: inline-block;
}
.background{
width:200px;
height:200px;
background-color:green;
}
.overlay{
width:100%;
height:100%;
mix-blend-mode:soft-light;
background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
background-size:cover;
}
.background2{
width:200px;
height:200px;
background-color:green;
background-blend-mode:soft-light;
background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
background-size:cover;
}
<div class="background">
<div class="overlay"></div>
</div>
<div class="background2">
</div>
You have already a good answer from LGSon.
Just to clarify it a little bit further:
The layers that you have here are, from botton to top:
background element background-color
background element image
overlay element background-color
The background-blendmode applies inside the background element, in this case layer 2 over layer 1
The mix-blend-mode applies element 3 over the result of 1 + 2
So, if only one of them is efffective, the order is the inverse
it looks like to me that mix-blend-mode also uses background-color to blend it when background-blend-mode doesn't.
test using and change background-color as well:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-blend-mode
I'm stumped on this one. What's the most elegant/efficient way to make this happen? I've got an h3 to the left, the repeating symbol/image ("::::::"), and then a link. This occurs between several h3/link areas throughout the site.
Also note, I'm using the twelve column schema, specifically Foundation.
Set a background element with the repeating symbol and a width of 100%, and then set a white background to the text and place it over the background.
<div id="wrapper">
<div id="text1">Featured Courses</div>
<div id="text2">See All Courses</div>
</div>
And CSS:
#wrapper{
width:100%;
background:url(image.png) repeat-x;
height:20px;
}
#text1, #text2{
background-color:#fff
padding:5px
height:10px;
}
#text1{
float:left
}
#text2{
float:right
}
This is probably not exactly what you need but you get the idea.
I was hoping I wasn't a beginner with css, but I can't understand why the following happens...
You can see an example here
I wish to display 2 separated div on the same "line" :
First div must 100% width to the second
Second div at the extrem right of the first
So, I've done the following
// CSS
.div2 {
background:#EDEDED;
float:right;
}
.div1 {
background:#CCC;
}
.div1, .div2 {
padding:4px;
margin:4px;
}
.round {
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #000;
}
// HTML
<div class="div2 round">Test 2</div>
<div class="div1 round">Test 1</div>
But the .div2 is inside the first div...
How to display something like following ? (Like I thought it should be displayed...)
Any help appreciated...
EDIT : SOLUTION
By user570783
.div1 {overflow:hidden;}
Work like a charm, but not really documented, why this works ?
float does what is says. float. as in stuff can be underneath it. Text will be wrapped, but borders won't
if you know the width of "Test 2", you can add a "margin-right: x;"
OK, there are many solutions here involving, floats, inline-block, margins and borders but all require knowledge of at least one element's size.
However!
There's a trick you can do here. If you add 'overflow:hidden' to the first div it will force the div to 'block formatting context'
This will get the result you're after, with dynamic sized right floating element.
To make this work in IE5 and 6 you need to trigger 'hasLayout' on the first element, so position: relative;
fiddle
I've gotten stuck on how to code the css for these inverted curvy tabs that were supplied by a design agency.
see here: http://max-guedy.com/images/tab.png
EDIT added example with hover state.
I created a demo how I would do it:
jsBin demo
We set the brown color to the whole ul element
a 25x52 sprite image .png of the curve : (will change bg-position on hover)
http://img401.imageshack.us/img401/258/bg2d.png that we will set to the li element but with no bg color.
The most importsnt here is to setup a higher z-index to the li elements, decreasing it on hover
Take care to set to the a elements left padding and respective -left margin to allow the anchor to 'hide' below the previous element image.
Done that you can have wide and wider links and your template will do the work!
and this CSS:
ul#nav{
height:26px;
background:#A15049;
border-bottom:1px solid #fff;
}
ul#nav li{
position:relative;
background:transparent url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right top;
height:26px;
display:inline;
float:left;
padding:0 25px 0 5px;
z-index:1;
}
ul#nav li a{
padding-left:24px;
margin-left:-24px;
height:26px;
display:block;
color:#fff;
}
ul#nav li:hover{
z-index:0;
background: url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right -26px;
}
ul#nav li:hover a{
background:#CE392C;
}
It is just about possible to achieve this kind of thing with CSS.
Very difficult, but possible.
By default, border-radius of course only gives you regular rounded corners.
You can stretch them to some interesting shapes by adjusting the radius values. This will get you some of the way to your goal.
But the real trick here, to get the round-out parts of the tabs, is to use the CSS :before and :after pseudo-selectors to create additional styling elements, to which you need to add further border-radius.
The technique is described here: http://css-tricks.com/better-tabs-with-round-out-borders/ ... albeit for a fairly simple vertical-shaped tab. But it does a good job of explaining how to achieve the turn-out effect, which will be critical to you if you want to do this in CSS.
Bear in mind also that none of this will work in old versions of IE. IE8 does support :before and :after, but not border-radius. And while hacks like CSS3Pie exist to fix that, I wouldn't recommend using them for this kind of thing. It is likely to break.
If all the above sounds quite tricky and not really worth it, I would tend to agree. I think you'll find that a few simple images will work much better for your tabs in this instance. You could also try SVG to draw them if you want to be clever, but this will also have issues with old versions of IE.
Hope that helps.
You're easier off using images.
But if you insist on using CSS, I'd say that you need to use a lot ofborder-radius
That's an interesting challenge.
My first idea was to apply a skew transform to the tabs, a border radius to the top right corner and take care of the rounded lower part using a pseudo-element.
Unfortunately, this looks ugly http://dabblet.com/gist/2759785
Still, it bugs me that there must be a better way to do it with pure CSS.
I would say it's possible, but the amount of time that it would take would not be worth it, especially because it won't work in IE < 9...
There is a good tutorial that I have used in the past at css-tricks
However, as others have pointed out, I would recommend using images.
It really doesn't take THAT much CSS to achieve this anymore. Granted you'll have to toy with the radius' to get the desired slant.
HTML
<div role="tablist">
active tab
inactive tab
inactive tab
</div>
<div class="pane">
<section id="active-tab1" role="tabpanel">
<p>Show whatever</p>
<p>You Want</p>
<ul>
<li>inside</li>
<li>This</li>
<li>Section</li>
</ul>
</section>
<section id="active-tab2" role="tabpanel">
</section>
<section id="active-tab3" role="tabpanel">
</section>
</div>
CSS
[role=tablist]{padding:15px 15px 0;margin-left:88px;}
[role=tab]{
color:#222;
display:inline-block;
padding-left:15px;
padding-right:15px;
text-decoration:none;
line-height:44px;
position:relative;
min-width:150px;
text-align:center;
border-radius:15px 15px 0 0}
[role=tab]:hover{background-color:#ecf0f1;color:#222;}
[role=tab][aria-selected=true]{
background-color:#3498db;
color:white; }
[role=tab]:before,
[role=tab]:after{
content:'';
border-bottom:10px solid #3498db;
position:absolute;
bottom:-10px;
width:44px;
height:22px;
z-index:1; }
[role=tab][aria-selected=true]:before{
left:-44px;
border-right:10px solid #3498db;
border-bottom-right-radius:25px;
}
[role=tab][aria-selected=true]:after {
right:-44px;
border-left:10px solid #3498db;
border-bottom-left-radius:25px;
}
.pane{
background-color:#3498db;
padding:25px;
margin-left:5px;
margin-right:5px;
color:white;
border-radius:15px;
}
And odds are you can slim even that down, made it in about 10 minutes.
http://jsfiddle.net/darcher/819yz9Ly/