Responsive Login Page Motif

HTML & CSS
1

Hello, I made a design for a login page and I wanted some advice for best building the this page but more specifically the motif on the left side. To build it out with CSS or using jpg, png or whatever, also considering various breakpoints. This is for Web.

Breakpoints for this site are: 1390px, 1230px, 1070px, 910px, 750px and of course going higher to cinema display

2780Ă—2048 136 KB

2

Maybe svg would be a good choice and allow you to scale it perfectly as required.

I could draw it in css by skewing a few boxes but scaling it nicely may be awkward.

1 Like
3

ah I see but we would need to target the breakpoints correct?

We tried building it with just CSS but yeah it was awkward and ran into issues in min height and browser height.

4

Hi there csosa,

here is the svg that @PaulOB suggested…

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1380 2048">
   <path d="M0,0 740,0  0,520Z" fill="#1e4167"/> 
   <path d="M740,0 814,0  1380,418  1380,530  692,33Z" fill="#67acf1"/> 
   <path d="M814,0 936,0 876,46Z" fill="#0059b3"/>   
   <path d="M936,0 1182,0 1004,141 876,46Z" fill="#3391eb"/> 
   <path d="M1182,0 1380,0 1380,44  1130,234 1004,141Z" fill="#013567"/>
   <path d="M1380,44 1380,418 1130,234Z" fill="#4699e9"/>
   <path d="M692,33 1380,530 1380,1496 670,1998 0,1516 0,520Z" fill="#0074e5"/>  
   <path d="M1380,1496 1380,2048 598,2048Z" fill="#1e4167"/>
   <path d="M598,2048 568,2048 0,1630 0,1516 670,1998Z" fill="#67acf1"/>
   <path d="M568,2048 402,2048 486,1986Z" fill="#0059b3"/>
   <path d="M402,2048 154,2048 356,1892 486,1986Z" fill="#3391eb"/>
   <path d="M154,2048 0,2048 0 1972 230,1798 356,1892Z" fill="#013567"/>
   <path d="M0,1972 0,1630 230,1798Z" fill="#4699e9"/>
  </svg>

If you want to use it as an “img src” here is the containing zip file…

blue-motif.zip (475 Bytes)

coothead

5 Likes
5

so should we not worry about browser height? with this svg concept it should work? ill have to test it I know…

6

Hi there csosa,

check out the attachment, to see a working page example. :winky:

example.zip (1.9 KB)

coothead

3 Likes
7

I like it and curious to know how you converted the image.

1 Like
8

I opened the image in “Photoshop”, and zoomed it to 300% and set View >Rulers.

It was then just a case of finding the coordinates of each of the thirteen shapes.

The “ViewBox attribute” is the image’s position and dimensions.

The method used is basically the same as that used for the HTML “area element”.

I would like to point out that the page example that I posted would have worked
perfectly well with the .png image.

The only difference being file size; 161KB for the png and 1KB for the svg.

coothead

3 Likes
9

Many thanks for the detailed reply.

I was hoping a free online PNG to SVG converter was used :frowning:

I have not used PhotoShop for quite a few years because there is not a Linux version. Maybe one day I will re-install Windows just for PhotoShop because it is an excellent graphics tool,

10

That method, unfortunately, is not as satisfactory as the manual. :unhappy:

Compare the result of an online svg…

image2vector.zip (100.8 KB)

…with mine.

You will see that file size is over 200 times larger and the quality
is rather inferior. :eek:

672Ă—523 48.8 KB

“Photoshop” was not the only option. :winky:

I could have got the coordinates from IrfanView,
my free and very small image editor. :biggrin:

coothead

2 Likes
11

I had the same problem with an animated gif and was looking for a better solution. I tried umpteen versions and also many crunch utilities all without a satisfactory solution.

I miss the tapping foot :frowning:

Edit:
IrfanView is not available for Linux :frowning:

I used to use “https://pencilsheep.com” but the site seems to be offline. I think I have the installation file buried in my backups and need to try and resurrect it because it is also an excellent editor.

1 Like
12

It’s far better to manually trace to vectors in a graphics program. As @coothead has shown, the automated tracing gives sub-optimal results, the only advantage to them is avoiding effort and time spent.

2 Likes
13

also for the smaller breakpoints it would look like this:

Also what does their have to be a vertical scroll when the height of the browser is decreased?

15

Carlos,

Please try this rearrangement of @coothead’s code and see if this version of “Motif Madness” fills your wish. No scrollbar at short heights (unless your content makes it so) and it doesnt give a hoot about breakpoints.

There are three files in the bundle.
motif-svg=coothead ronpat.zip|attachment (1.8 KB)

2 Likes
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.