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 7 years ago.
Improve this question
I've been researching for a while and still can't find a way to make this border on css, so far I've made only one side.
I mean the same border with css not with the picture
This is posible with css3. Take a look: https://developer.mozilla.org/es/docs/Web/CSS/border-image
First: define the width of your border, as you would usually do (border: 30px solid...);
Then specify the caracteristics of the image with border-image:
-You need to set the image with ulr().
-Then set in px (no units) or percentage (%) how to slice the image to create the borders. Notice that to tile the border the image gets sliced in 9 sectors. This number is the distance from the borders of this slice. For example, in a 300x300 px like in this case, if you slice it at 100, you are generating 9 squares of 100x100.
-Finally say if it should repeat, round or stretch.
A tip: this is a bit difficult so my advice is that you make your image tilable in a 3x3 grid, this way the corners will fit the sides.
.box{
width: 200px;
height: 200px;
background: #EEE;
border: 30px solid transparent;
border-image: url("http://i62.tinypic.com/2dh8y1g.jpg") 100 round;
}
<div class="box"></div>
Vendor prefixes arent very necesary any more: http://caniuse.com/#search=border-image
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
How can I create a div with an aspect ration of 9:16. I have got some examples of 16:9 but when I am trying to calculate the aspect ratio of 9:16 the height of div is getting too long.
How can I calculate the 9:16 aspect ratio where a div will fit in any kind of viewport.
To keep the aspect ratio the same, make sure that you are using the same units for both the width and height. You should also use appropriate units that are based off of the dimensions of the user's viewport. For example, using vw units:
.my-9-16-aspect-ratio {
width: 9vw;
height: 16vw;
border: 2px solid red;
}
<div class="my-9-16-aspect-ratio"></div>
You can then scale these numbers up or down as desired.
You can also use the css calc() function along with a css variable to avoid calculating the height by hand like so:
.my-9-16-aspect-ratio {
--width: 95vw;
width: var(--width);
height: calc((16/9) * var(--width));
border: 2px solid red;
}
<div class="my-9-16-aspect-ratio"></div>
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 6 years ago.
Improve this question
Recently I rebuild the Spotify home page using pure Javascript and scss to test my front-end study, Here is the link.It's not finished yet.
You can see the the difference between mine and the real one is the big-background, the markup is
<div class="bg-main">
<sceiotn class="can-see-the-background-image-1"></section>
<sceiotn class="can-see-the-background-image-2"></section>
</div>
I gave the section rgba(rgb,0.7) background,You can see the effect is not that bright as the real one,which can see the back albums clearly.I dig into their source code,But I didn't find the trick.
Solution
First, add the gradient to the background property on your element <div class="bg-main">:
.bg-main {
width: 100%;
height: auto;
background-attachment: fixed;
background: url(../img/bg-albums.png) repeat,
linear-gradient(50deg, rgba(255, 65, 105, 1) 0,
rgba(124, 38, 248, 1) 100%) repeat
position: relative;
}
Then, in your element <header class="header"> remove the gradient from the background property:
.header {
height: 760px;
width: 100%;
text-align: center;
}
Explanation
The reason Spotify's is clear to see is because the background colour gradient is on the same element as the image. So the image is superimposed on top of the background gradient.
On your site you have the image underneath, and then you place a faded background over the top - making it more difficult to see. With the image on top of the gradient background, it makes the album art much clearer and easier to see.
final result
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 7 years ago.
Improve this question
How to create a gradient effect for content on a page like the one on this website. There is a background image and the text and images showing the color of the background image which gives a gradient effect. How can I create a similar effect (non-static gradient effect)?
Also is it all CSS or is there any Javascript library that can achieve the result?
Has two div containers positioned over each other. One with a background and the other contains text and images with the css property mix-blend-mode set to screen
The div with the background should have position: absolute; and full width and height
mix-blend-mode: screen;
I have created a fiddle to demonstrate.
mix-blend-mode is not supported by IE or Opera. Read more about it here.
For Text, you can read the link below with demonstration:
http://cssdeck.com/labs/css3-text-gradient
For Image, you can do it by adding a filter on the image:
https://css-tricks.com/almanac/properties/f/filter/
What filter did they used in the website?
-webkit-filter: grayscale(100%) contrast(1.5) drop-shadow(0px 0px 1px white);
filter: grayscale(100%) contrast(1.5) drop-shadow(0px 0px 1px white);
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay, so this is a first - my CSS is working in all tested browsers...except Chrome.
I am attempting to render a simple circle in a div.
Example is: http://redappledev2.wpengine.com/ The login icon in the upper right hand corner of the header (circle with the user image).
In Firefox, IE, Safari the circle renders as a typical circle.
The current css is: border-radius: 25px; but the expected result also occurs when the css is border-radius: 50%;
From what I can peg down - it looks like in Chrome the problem is that the parent container - an A tag - the height is to short which is based on it's font size - currently 20px. The font size cannot be increased, but in testing when I increase the size - the a tag's height increases and the circle border is rendered as a true circle and not an eclipse.
Am I missing something? Is there a better way of rendering the circle border around the user icon?
Thank you!
It looks like if you change div.icon-circle from display:inline to display:inline-block things start to appear as you intend in Chrome.
I just used the DOM inspector to tweak some of your styles and got to a circle with the following style rule:
.icon-circle{
border:1px solid #627F9A;
border-radius: 25px;
display: inline-block;
padding: 0px 5px 2px 4px;
position: relative;
top: 2px;
}
Good luck with your site
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am trying to have my image appear on top of a 300px border, as if the border is a background color for the image. This is my code:
.containerpagecontent { border-left: 300px solid #fff; } img { float:left; }
But it is still not working. What am I doing wrong?
NOTE: I cannot simply use background-color for the image, because the end of the image has to extend off the color.
There is no such thing as:
margin-left: 300px solid #fff;
you probably meant:
border-left: 300px solid #fff;
Also, see if something like this might work for you: http://jsfiddle.net/Lb6Rz/. It's using the padding and background properties on a single element to create a border.