Draw circles in CSS or use .pngs? [closed] - css

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;

Related

CSS: Curved inverted clipping [closed]

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 4 years ago.
Improve this question
I'm trying to clip an image like the curve here:
I'm breaking my head over this, very much appreciated if someone could help me on the way. I'm pretty sure this can be done with css but if not, I'll probably end up using an svg image
For reference: https://css-tricks.com/clipping-masking-css/
Try to use ellipse clip-path.
clip-path: ellipse (radiusX radiusY at x y);
radiusX has to be your imageWidth*2
radiusY can be what ever you want
Afterwards set the x and y values to the bottom right corner of your image.

How can I see the inside of the content box [closed]

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 7 years ago.
Improve this question
Hi I was wondering how can I see what is inside this box "" in the content in the style sheet
for example : I want to know the link of the image:
.facebookicon::before {
content: "";
}
Those square boxes usually mean that the Glyph that should be represented is missing from the character set of whatever program or font is being used to display the text. The only option is to attempt to open the file in another program.
Taking a rough guess it may be that the stylesheet your looking at is using a custom font and has created glyphs for various icons (this is done so that they will scale better on HiDPI screens) and assigned them to regions of the character set that is unused by normal fonts in order to avoid clashing.
In other words, It is highly unlikely there is an image.

3D effects in website [closed]

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
Say I want to make a website, and I want the page to have some sort of a main-area, and it's supposed to be something like an open book,
sort of something like that if I want to make my point, I want the left border to be 100% of the height of whatever the page is going to show, and the right border(the one that's intersecting with the left border of the right page) to be say 90% of the height of it... that's sort of the idea of the design.
I was sure there would be some HTML5 features that would support this since I've seen stuff like this around the internet but I realized it wouldn't be that easy.
I hoped that there would be people with proper knowledge of web design that could help me with this thing
This is very good article for page flip functionality with html5 :
http://www.creativebloq.com/html5/create-page-flip-effect-html5-canvas-8112798

How to make a curved edge container in css [closed]

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.

How to create a texture paper background using CSS without image [closed]

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 3 years ago.
Improve this question
Is there a way to create a background using CSS without the image? with color, and texture?
As Dustin said, there's no "texture" CSS feature. however, if you're using CSS3, you can do some pretty cool tricks like gradients or shadowing to make some neat backgrounds.
No, there is no "texture". However if you find a color and could drop the texture then you can. I would just find a small image to repeat.

Resources