Questions tagged [css]
CSS, short for Cascading Style Sheets, is a language used to control the presentation of HTML and XHTML documents.
223
questions
-1
votes
0
answers
28
views
Trying to determine the name of this video effect to find code for my website
I'm working on an interactive page that includes scroll-based sticky videos and I found a neat video effect that pulls the viewport towards an embedded video and then enlarges it to be full-screen. ...
Jason O
0
votes
0
answers
28
views
Best idea to convert table content for smaller screen
I have this design and now I am trying to figure out how to make this to work well for mobile screen as well.
Since there might be more List, I figure that I can convert it to scrollable tabs so it ...
- 1
0
votes
1
answer
65
views
Software that works like Google Chrome's "view page source"
I've only been using Google Chrome "CTRL+U" Tools to check my web design's responsiveness and edit styles or elements, however it started to get so freaking laggy which slows me down ...
0
votes
0
answers
22
views
Using on-page styles & scripts for entire website?
From observing dozens of my websites and their analytics, new visitors rarely browse more than 2 pages per visit and their return rate is even lower as no more than 10% - 30%.
Does this mean serving ...
- 217
1
vote
2
answers
56
views
How to do loading animations when at certain times the application is too fast for them?
I am facing a strange "catch-22" like problem, while developing an application for a mobile browser. My problem is that, some inner-app screens are fetching data from a back-end server, and ...
- 131
1
vote
2
answers
53
views
Studies of the impact visual design has on user engagement
My intuition is that well-designed sites are more pleasing for us to navigate, which means well-designed sites receive more user engagement.
Are there studies that test this hypothesis? A/B tests of ...
- 227
2
votes
1
answer
271
views
Using text-shadow for accessibility
I'm interested in understanding whether there has been any research or confirmed values for using the text-shadow property with the goal of meeting WCAG minimum colour contrast values.
In my ...
- 2,054
1
vote
1
answer
54
views
How do I know which measurement units to use for which elements in CSS?
My question why would I ever NOT use percentage for sizes? got some good feedback, some good comments and some good answers.
They told my why not to always use percentages, and even when certain ...
4
votes
1
answer
104
views
Who should manage CSS colour variables in a web project? Design or Front-End?
We're working on a multi-brand project where the site must switch between company branding.
To do this we have CSS colour variables in place switching between styles depending on what brand is using ...
- 41
0
votes
0
answers
64
views
Why would someone use a button as a link and vice versa
I've seen people trying hard to make an <a> tag look like a <button> (by CSS), and people doing vice versa.
Why would they do that?
IMHO, they encourage clicks on (fake) buttons, and ...
- 1
2
votes
3
answers
91
views
Styling a hint for relative numerical value
Background:
I have a list of elements in a browser which each are a numerical distance away from the same origin point. I want to give a visual hint to quickly give a feeling for how far a list-item ...
- 133
0
votes
1
answer
79
views
How do I space or size HTML text so that blurriness is mininized? [closed]
The image below are examples of two different methods that the letter,"J" is rendered:
When rendering text, letters seem to be, "warped", or offset by a fraction of a pixel. This ...
1
vote
1
answer
216
views
Screen resolution stats and responsive design
I'm working on a new website and there's some debate regarding what width should be picked as maximum for the main, fixed-sized, grid (it won't be a 100% width layout). (Should it be 1100px? Should it ...
- 111
0
votes
1
answer
68
views
Is there a css @media query that can identify a landscape or portrait display? [closed]
I am trying to create a media query to identify if a screen is landscape or portrait so that I can change the CSS styling when a screen is rotated. Is this possible and how would i do it?
1
vote
2
answers
78
views
How is this UI called (multiple pages with settings, dots on bottom marks progress, usually after install of app)
On mobile phone when I install some app it shows few pages with basic settings, at the bottom are dots indicating progress, sometimes back/next button. How is this thing called? I want to find and try ...
- 11
2
votes
1
answer
132
views
How do I design a mobile table with multiple headers?
I have the following table design for PC.
How can I make it easier to see that "ddd", "eee", and "fff" are groups of "CCC" in mobile view?
【PC】
【MOBILE】
- 45
0
votes
2
answers
173
views
Web design practices to minimize browser refresh [closed]
The design of our website is such that whenever we make some changes in CSS & JavaScript files we require the user to clear the browser cache and get the latest version of these files from the ...
- 1
2
votes
1
answer
670
views
(Accessibility) - Back button placement on the page in SPA
I am working with an SPA with Angular and the designs indicates that there is a back button and it is before the Page level heading usually the H1. For SPA, it is a general practice that we place the ...
1
vote
1
answer
45
views
How important is zooming in and out (cmd + , cmd - ) for websites (Desktop view) in terms of accessibility?
I am working on a website at the moment and someone else is in charge of the HTML/CSS side of things.
I've noticed it's not possible to zoom in and out with the browser function of cmd and + or -. The ...
- 13
15
votes
3
answers
3k
views
Make Optional Buttons More Clickable
I currently have a UI where I have three optional buttons. By clicking on a button, it will go to another user flow and the button is "completed". Unclicked buttons are considered "...
- 369
1
vote
1
answer
61
views
When making a website that is font-size responsive, are there any guidelines to what font-sizes authors blow text up to?
It seems an opinion whether or not, as web-developers, we should design websites taking into account the user increasing font-size (e.g. on Chrome: Chrome>Settings>Customise fonts). (Although it ...
- 11
-1
votes
1
answer
46
views
What design changes will improve visual appearance of the calculator [closed]
This is the HTML code for a very basic calculator. I am at beginner level on bootstrap and definitely beginner level designer. what are some changes i can do to make the visual appearance better. i ...
- 99
0
votes
1
answer
74
views
CSS effect to indicate link is a video?
I've got a page with thumnbails that link to videos.
The thumbnails have a youtube style Play button. But I still only have 20% of folks clicking those. I want to make it clearer & more ...
- 1,516
1
vote
2
answers
147
views
How do I convince my boss that too many link colors are bad for accessibility?
I work at a really small company making websites for a specific clientele, an older female audience.
My boss, also the lead Art Director, uses lots of different colors for links across an entire ...
- 19
1
vote
1
answer
103
views
Need opinion on this web design FOR UX/UI/CX - Beginner in designing [closed]
Hi, first of all, sorry if I'm posting in the wrong section. I want to get an opinion about the design of an event management system. I've google on UX example design but most only show for simple ...
- 13
1
vote
1
answer
35
views
Similar color groups for HTML
I start my adventure as a front end developer and I wonder about the easiest way to choose the color groups used in css for my projects. For example, I have a group of grayscale colors. How large ...
- 13
4
votes
2
answers
625
views
How to deal with extra spacing with line-height when spacing between elements should be consistent
We want to design our website so that all elements are spaced 24px apart (paragraphs, form groups, header & content, etc.) and "related" elements (label & form field) are spaced 8px apart. We ...
- 163
0
votes
1
answer
68
views
Spacing out a Headline, body, and CTA button
Is there a standard on what is the better way to space out a Headline, body text, and button link?
Using a margin-bottom on the headline and body?
Or using a margin-top on the body and CTA button?
- 103
31
votes
4
answers
8k
views
Why rounding odd font sizes to even?
Today I started implementing a design that had some copy text with font size 17px. My fellow web developer told me that we should round that to 18px and more in general that we should not use odd font ...
- 311
0
votes
1
answer
224
views
Number incrementers and accessibility
How are number incrementing arrows for accessibility? I would think they would be bad for keyboard users, but is there any study to back that up?
- 64
0
votes
3
answers
173
views
In the holy grail layout of web design why is the navigation menu vertical and not horizontal?
i am a beginner with web design, while studying i came across the "holy grail layout" and i was just wondering why is it that the menu is vertically aligned while most modern websites tend to use a ...
2
votes
1
answer
166
views
Custom scrollbars in websites - do they make any sense?
Are custom scrollbars still needed today?
The only reason they were needed so far is because they are fugly on Windows. They are always visible and don't autohide and they just look bad. But I've see ...
- 71
3
votes
3
answers
500
views
Modal button positioning on mobile
I am designing a design system for my company and am currently looking at designing the modals and dialogues for both desktop(tablet too) and mobile.
I have placed the primary action to the bottom ...
- 71
2
votes
1
answer
121
views
Is there any reason not to change the style of web radio buttons and check boxes?
It's still very difficult to change the visual look of HTML radio buttons and checkboxes using CSS.
For example, changing the check box's border-color does nothing on major browsers.
Is there a UX ...
- 121
0
votes
1
answer
111
views
What is the best way to start designing this website? [closed]
I am new UI(ReactJS) Developer, I want to develop this webpage from scratch, however, I am not that experienced, hence, confused how to actually start. Should i start with logo or header or sidebar or ...
- 11
2
votes
0
answers
60
views
Different border-radius in different field. Is it a good practice? [closed]
Using different border-radius for different fields (e.g. textboxes, buttons, cards) to make the curves looks similar. Curves on the large field doesn't look similar to small fields.
Expected:
What'...
- 21
1
vote
2
answers
283
views
Is there a standard for indicating a high contrast style? [closed]
I am working on a web app and have developed both a normal stylesheet and a secondary high contrast stylesheet. I am coming unstuck when it comes to allowing a user to switch between styles.
Is ...
- 225
1
vote
1
answer
149
views
Should I use <aside> for off-canvas navigation? [closed]
I want to create an accessible off-canvas navigation and most tutorials say you should put it inside the <aside> element, however, since it is my main navigation which will appear on one line on ...
- 113
1
vote
3
answers
599
views
Techniques for handling opening a new tab and ensuring web accessibility with WCAG 3.2
WCAG 3.2 indicates that content should be provided in a predictable format and that subsequently when a new tab is opened on a click that the user is made aware of this.
I have a webpage with a list ...
- 113
0
votes
1
answer
64
views
Why can't I type directly into the HTML with FF Dev Tools? [closed]
Hopefully this question isn't too oddly specific. Let me know if it belongs on ProWebmasters instead...
I'm making some mock-ups in Photoshop, using screen shots from the site in its present state as ...
- 111
0
votes
1
answer
297
views
How to improve a scrollable dropdown section issue [closed]
I have an issue where the overflow of a scrollable list on a website is cutting off my dropdown menu. The scrollable list has a height constraint because it is in a modal which has a set height and ...
- 1
1
vote
3
answers
335
views
Ways to show a div has more content
I'm basically a back end devlopper but I need to create a page displaying data in diiferent tables.
Some of the data rows may contain very large content but I chosed to make all rows the same height. ...
- 13
0
votes
1
answer
91
views
Vice versa colors for on and off hover of buttons [closed]
How should we choose the color for buttons is there a should always be a dark and light colour or two differed colors. What will be the best strategy for choosing colours.
And is it should always be ...
1
vote
2
answers
385
views
Footer menu same as Menu
The links which are in the menu are replicated in the footer menu. Is placing same menu links in the footer redundant or is it a bad practice in web design or development?
2
votes
1
answer
158
views
Cursor usage in different application elements
I am working on an application that is mostly used by desktop users. So I am trying to perfect the use of the cursor css-rules.
First of all, I have read and try to follow the practice of having ...
- 121
2
votes
2
answers
28k
views
Double Scroll Bar on Website [closed]
A website I am responsible for: www.livingsalads.co.uk has a double scrollbar on most browsers (chrome anyways). Which is obviously an issue as it looks bad and also browsers sometimes use the ...
- 21
5
votes
1
answer
648
views
Creating an accessible, animated, and responsive navigation system
I've been struggling for the past couple weeks to design the perfect navigation (menu) system for my personal website which I am designing.
First, I need a system that is completely accessible as I am ...
- 151
3
votes
2
answers
221
views
How do i design website mockups when i already have a css framework in mind?
Do I choose the CSS framework first before designing the website mockups? Or is it the opposite. What if I finish designing the mockups, but the css framework isn't a perfect fit ?. Should I first ...
- 133
0
votes
1
answer
90
views
When prototyping responsive web design, I have to consider how frontend dev. will do it: CSS Grid/Flexbox/Bootstrap?
My question context:
I have to design a responsive website, that is now poorly responsive on bootstrap. I would like to start drawing IA of interface elements and how they act on several screen widths ...
- 63
0
votes
2
answers
56
views
What is the best pattern for opening Mega Nav on touch device when parent Nav items are link to landing pages?
I have a mega menu opening on desktop, on hover over a parent nav strip. The parent nav items are links on click.
The same menu is to be used on landscape tablet. Without on hover, click is used to ...
- 1