Entries Closed 🐫 [CSS] Design (Webwide) by Committee

Entries Closed 🐫 [CSS] Design (Webwide) by Committee

Adam

Mr. Webwide
Administrator
Local time
11:56
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

1584841939755.png

There is a famous saying, "a camel is a horse designed by a committee", emphasising the ineffectiveness of including many conflicting opinions into a single project through compromise.

Now, I think that's a little harsh on a camel, but hey it's not my quote. 😉

That being said, I thought we'd have a little fun and see just how bad (or great?) designing by committee really is!

You will spot a new theme, a clone of the default theme, in the style picker (footer) called 'Design by Committee'.

In this thread, you may post CSS (or LESS) that will be added to a extra CSS file. Feel free to hotlink images (host at Imgur) if you really want.

All non-site-breaking suggestions will be added. You may need to chuck in some !important's.

* { font-family: 'Comic Sans' !important; } is discouraged but not strictly forbidden... 😂

This should be interesting... 😄

 
Last edited:

Adam

Mr. Webwide
Administrator
Local time
11:56
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

I'll start shall I?

CSS:
.p-navgroup-link--user:hover, .structItem--thread:hover {
    .avatar {
        transform: rotate(360deg);
        transition: 1s;
    }
}
🤭

 
Last edited:

avena

Member
Local time
07:56
Joined
Oct 19, 2019
Messages
152

Hey, @Adam shall the CSS be agnostic of context? For example, your CSS code includes classes to specific HTML elements, but @Gummibeer code is not.

 

Adam

Mr. Webwide
Administrator
Local time
11:56
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

CSS:
body {
  transform: rotate(180deg);
}

😉🤪 - reason: the world is upside down right now.
Haha! I love it, but I’m gonna file that one under ‘site breaking’. 🤣

 

Adam

Mr. Webwide
Administrator
Local time
11:56
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

Come on people I want (mostly usable) C H A O S when we're done with this thing. 🤭

Less:
.uix_logo {
    transform: rotate(-5deg);
    transition: 0.5s;
   
    &:hover {
        transform: rotate(5deg);
    }
}

a.username[data-user-id="1"] {
    &:after {
        content: '👨🏼‍💻'
    }
}

 
Last edited:

Sharkie

🦈
Gold Member
Local time
08:56
Joined
Feb 14, 2020
Messages
141
Pronouns
She/Her

.uix_sidebarNav .uix_sidebarNavList .p-navEl-link span, .uix_sidebarNav .uix_sidebarNavList {
text-shadow: 1px 1px #ff66ff;
}

Look, this isn't as chaos as I wanted, and I'm not totally sure if the jumble of words is right (yes I copy/pasted from inspect, judge away). But it adds a bit of... static aesthetic. 🤣

 

Adam

Mr. Webwide
Administrator
Local time
11:56
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

.uix_sidebarNav .uix_sidebarNavList .p-navEl-link span, .uix_sidebarNav .uix_sidebarNavList {
text-shadow: 1px 1px #ff66ff;
}

Look, this isn't as chaos as I wanted, and I'm not totally sure if the jumble of words is right (yes I copy/pasted from inspect, judge away). But it adds a bit of... static aesthetic. 🤣

That is hideous! I love it. Added.

 

Sharkie

🦈
Gold Member
Local time
08:56
Joined
Feb 14, 2020
Messages
141
Pronouns
She/Her

The hideousness is what makes it absolutely perfect. 😂😂

 

avena

Member
Local time
07:56
Joined
Oct 19, 2019
Messages
152

Here the CSS code for a loader animation.

Simple loader rotationn:
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

div {
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  background: white;
  width: 64px;
  height: 64px;
  border-radius: 64px;
  border-top: 4px solid #F86DFE;
  border-bottom: 4px solid #FEAA06;
  border-right: 4px solid #2FDB5A;
  border-left: 4px solid #4E9EFE;

  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

Live: https://codepen.io/alelepd/pen/RwPEEry

 
Last edited:

Jordan

█🍁█ That Canadian Guy
Gold Member
Local time
06:56
Joined
Feb 25, 2020
Messages
11

Glow in Names:
.message-name, .structItemContainer .structItem-minor ul li:first-child a, .structItemContainer .structItem-cell .structItem-minor a, .username  {
    text-shadow: 0px 0px 3px #0076da;
}

Everyone will having a glowing username like the forums of 2000s xD

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
12:56
Joined
Oct 5, 2019
Messages
1,184
Pronouns
he/him

Rainbow post-titles on index and detail view 🌈 🏳️‍🌈

CSS:
.structItem-title a,
.p-body-header .p-title-value .label-append {
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

source: https://w3bits.com/rainbow-text/
It's not animated so it shouldn't be too distracting.

 
Last edited:

sfcgeorge

Sonic the developer
Gold Member
Local time
11:56
Joined
Oct 5, 2019
Messages
129
Pronouns
He/Him

This one makes it easier to know when you've scrolled down the page

Subtle:
@media (prefers-reduced-motion: no-preference) {
  .p-nav {
      background: url(https://raw.githubusercontent.com/sfcgeorge/uploads/master/uPic/3297996jhk3cxp0nf.gif) !important;
  }

  .uix_headerContainer .p-navSticky.is-sticky .p-nav {
      background: url(https://raw.githubusercontent.com/sfcgeorge/uploads/master/uPic/tenor.gif) !important;
  }
}

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
12:56
Joined
Oct 5, 2019
Messages
1,184
Pronouns
he/him

This one makes it easier to know when you've scrolled down the page

Subtle:
.p-nav {
    background: url(https://raw.githubusercontent.com/sfcgeorge/uploads/master/uPic/3297996jhk3cxp0nf.gif) !important;
}

.uix_headerContainer .p-navSticky.is-sticky .p-nav {
    background: url(https://raw.githubusercontent.com/sfcgeorge/uploads/master/uPic/tenor.gif) !important;
}
Because of this super crazy animation this should be at least wrapped in a prefers-reduced-motion media query.

 

sfcgeorge

Sonic the developer
Gold Member
Local time
11:56
Joined
Oct 5, 2019
Messages
129
Pronouns
He/Him

Because of this super crazy animation this should be at least wrapped in a prefers-reduced-motion media query.

That seems too responsible for design by committee but I've added it to be kind 😄

 

sfcgeorge

Sonic the developer
Gold Member
Local time
11:56
Joined
Oct 5, 2019
Messages
129
Pronouns
He/Him

am i hovering a button or am i not hovering a button sometimes its really hard to tell theres a weird white triangle floating around the screen but i don't know what thats for i just want to know when im hovering button ok:
@media (prefers-reduced-motion: no-preference) {
  .button:hover, a.button:hover {
    transform: scale(1.5) rotate(1080deg) rotateX(20deg) rotateY(15deg);
    filter: brightness(125%) saturate(200%);
  }   
}

 

Gummibeer

Astroneer
Moderator
Local time
12:56
Joined
Oct 5, 2019
Messages
1,184
Pronouns
he/him

That seems too responsible for design by committee but I've added it to be kind 😄
I would agree if it wouldn't risk the health of some. So like my 180° rotated page or white on white would make the page unusable but don't risk the health of users.

 

sfcgeorge

Sonic the developer
Gold Member
Local time
11:56
Joined
Oct 5, 2019
Messages
129
Pronouns
He/Him

it is too hard to know what is link, what is buton. please can make it so you know what link is and what buton like a label or something

Accessibility:
a::after, .button::before {
  content: "buton: ";
  position: absolute;
  top: -20px;
  left: 0;
  color: black;
  background: yellow;
  height: 15px;
  line-height: 15px;
  font-size: 12px;
  text-transform: lowercase;
  opacity: 0.75;
  font-weight: normal;
}

a:not(.button) {
  position: relative;
}

a:not(.button)::after {
  content: "link: ";
}

 
Top