Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Is it possible to create those "curved edge text containers" from css without setting any image as background ? Can anyone give me an example or point me to some website that uses something similar?
Thanks !
You can use CSS3's border-radius property to add rounded corners.
div {
border: 2px solid;
border-radius: 25px;
}
For more advanced shapes you will need to use CSS's 2d transformations.
The picture above can likely with a combination of border-radius, skew, and background-image.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I was wondering what's the best option to add the circles I have in my design here. Initially I just saved the background circles as a .png and slapped that in there, underneath everything else - but what's the best practice? Should I draw them in CSS?
According to your design, it seems that you will need to import some images, so my opinion is to cut the circles with the actual image (not two different files).
If there was no actual image, I would suggest drawing them with CSS since that would mean fewer calls to the server.
You can simply use border-radius in css, for that , for example :
border-bottom-right-radius: $size * 2;
border-top-right-radius: $size * 2;
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
how can I animate a linear gradient use as background as it is in this video: https://vimeo.com/471351659 ? I tried the technique of one gradient, whith a big background size, where I animate the background-position property, but it hasn't been a success.
How can I set a good animation with the background-position property, to have a gradient for each of the image.
It's definitely possible.
Personally, I'd take the approach of having two divs with background: cover and in an window.setInterval() callback, transitioning the opacity of the one in front (to be introduced) from zero to 1, then removing the one behind.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I recently came across a cool effect where the developer displayed an animation that was masked with text in CSS. You can find it on the headline of this page here: https://www.adobe.com/products/xd/features/whats-new.html
How do you achieve that?
As it turns out after a little of investigation it is actually quite simple:
You just put an SVG animation into your surrounding container as a background, and then use {mix-blend-mode: lighten;} together with {background: white} on the text:
.container {
background: url(https://www.adobe.com/content/dam/cc/us/en/products/xd/features/knockout_animation.svg);
}
.container h1 {
mix-blend-mode: lighten;
background: white;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
My website is http://boasish.com
I would like to know how I can move my "Submit" Button up like it is on this site http://www.theminimalists.com
Facebook
Twitter
Pinterest
RSS
change padding for to what you see below
.feature-area .feature-area-bottom {
padding: 0 0 9px;
}
Without any code in your question, this is a general answer.
You can change the position: attribute in css to either absolute or relative, and then use positioning commands such as top and left to relocate it.
Note that absolute elements are positioned in relation to their nearest position:relative; or position:absolute; div.
$('#sub1').css({'position':'absolute','top':'20px','left':'150px'});
jsFiddle Demo
References:
Is it possible to use position relative more than once in the same html page?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
My top navigation is short by 2 pixels, but only in Safari and Opera.
http://orbitprint.com/canvas/
The ul has a box-shadow, so you can see that the last li is short. I can't figure out why for the life of me!
Is anyone able to throw some light on this for me please?
Well you use percentages in a pixel layout. Your Panel is 969px wide and 8Buttons with 12,5 percent (=> 969/8 = 121.125px) which have to fit into a natural numbered pixel. So the best would be to use display: table for the menu and display: table-cell for the buttons. That should split the given space as evenly as possible.