Webwide is the inclusive forum community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

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

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
880
Reaction score
913
Points
915
Location
United Kingdom
Local Time
Today, 10:05
Website
adgr.dev
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:

avena

Member
Joined
Oct 19, 2019
Messages
93
Reaction score
82
Points
30
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
Joined
Sep 24, 2019
Messages
880
Reaction score
913
Points
915
Location
United Kingdom
Local Time
Today, 10:05
Website
adgr.dev
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

Member
Joined
Feb 14, 2020
Messages
51
Reaction score
62
Points
30
Location
Canada, eh! :)
Local Time
Today, 05:05
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. 🤣
 
  • Like
Reactions: avena and Adam

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
880
Reaction score
913
Points
915
Location
United Kingdom
Local Time
Today, 10:05
Website
adgr.dev
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.
 
  • Like
Reactions: Sharkie

avena

Member
Joined
Oct 19, 2019
Messages
93
Reaction score
82
Points
30
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:
  • Like
Reactions: Adam
Top