Edge more attractive and beautiful without using CSS3 - html

I am developing a site, you can see the code in this link.
I put a gray border on it but would like to put a border more attractive and beautiful.
Any ideas?
Thanks.

Without CSS3? Use images or image sprites

Related

How can I put the images on the page so that they are angled. [IMG attached.]

I want to put three images in a similar way as in the attached picture below. What tools can i use for it? Is it in principle possible to do it in HTML/CSS?
Picture
You can use the clip-path method to attach the pictures at an angle. Use the clip-path maker.
https://bennettfeely.com/clippy/

Animated webpage background effect

Animated Motion Background Effect
i have tried the answers from the question above, but not exactly what am looking for, i am looking for a way to create the same background effect like the one on this webpage: https://fonoapi.freshpixl.com/ any tips or how-to on how i can create it? i came across it and wanted to know how i can achieve the same effect or create a new one.
That effect has been created using a particle api that can be found on GitHub https://github.com/VincentGarreau/particles.js
It has nothing to do with css and/or css animations, it is basically a particle simulation rendered to a html canvas element.

Create CSS3 for background image

I was wondering if there is an easy way to recreate the attached image using CSS3.
I've included this image as a page background but one of the senior devs told me there is an easy way to create this image background using CSS3.
I thought the background images can be done using CSS3 for repeatable patterns. But this image doesn't have any patterns that I could see.
Is that possible for this image?
I think this is interesting as experiment, but its not pragmatic.
You can convert an image to css here. PNGs work best.
Warning though, you will get tons of lines of HTML + CSS to create this image. It will come out pixel perfect though. I will also warn you that I tried uploading it to Jsfiddle, Jsbin and Codepen - all of them would just hang. Pen loaded and I couldn't save it since it's larger than 1MB.
This is what my text editor looks like with your image converted to CSS though.
This is just for reference. Yes, you can convert to CSS, but it doesn't mean that you should. I suppose it might be useful for things like email? But not for large images.
Cheers!

css3 corners with different angles and shapes

On my [DEMO][1] below, I've been busy developing all the styles. but not able to do it properly only using css3.
Have you got a quick or nice way to do it only in CSS3? So I can make them more dynamic?
Thanks.

How can I achieve this :hover image overlay

I came across this site: http://gatilho.com/
I love the blue overlay and site title that slides down on image hover but I can't seem to figure out how it's done. I want the transition too.
Any suggestions?
Is it just CSS or jQuery too?
Thanks!
(p.s. I'm not looking to rip it off just like it so I want to figure out how!)
Looking at the source code, it looks like they're using http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm