Creativeness with Box-Shadow CSS Property

Web technologies like HTML and CSS have come a long way and now it is now used more than just creating simple web pages.
Almost every site you see on the web is writing in HTML and styled with CSS and those languages are way very simple than complex languages like ActionScript or C++, but despite of its simplicity it can be used to create masterpiece.

Following two examples shows what todays web technologies can be used for. What we really showcase here is the use of box-shadow CSS property which is usually used to create shadows on HTML elements <-- Just like on this.

The people who wrote the property's specification may have never thought what it can be used to create. Let's take a look at the amazing.

Mona Lisa in Pure CSS

One of the most discussed and popular portrait now re-created in CSS. CSS as you know is the styling language of the web, the thing using which you  make your website fancy :)
See it in action!

Mona Lisa Painting Recreated in CSS3's Box-Shadow

Now one may think why this is so special, a little experienced Photoshop guy can make that in minutes but note that this is done using a CSS property called box-shadow , the designer who created this wrote each and every pixel of the complete photo to produce this.
Da Vinci would have loved this..

Unicode Person Pixel Art in Box-Shadow

How about something simple ? As being a 90's gamer I always had a love for pixel arts and this caught my example:

Unicode Person Example

This simple image of a cute face raising hands is also created with the same technology that was used to create the 'Mona Lisa' example. And do I need to repeat it ? It's created in box shadow!


Now if you are wondering why this guy is so excited about images created in box-shadow then read about it here and you will understand why : https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow 

Confirming Facebook Group Membership Request At Once

If you have a popular Facebook group where you receive hundreds of membership requests then it becomes a tough job to accept all of them one by one.

You may already know about the "Select All Friends" code using which you can select all your friends to invite them to a Facebook event. We covered that topic in this post:
http://www.stramaxon.com/2012/02/how-to-select-all-friends-at-once-to.html

Facebook now provides a new "Add All" function for confirming all group membership requests at once, so there's no need to use this trick/code.

I wanted to post less on Facebook's topic but as you know it's a hot topic so one in a month is not a big problem.

Anyways, let's get back to the main topic, how would you accept multiple group requests at once. Actually you can disable the approval system for group request but that will enable everyone to join the group, fake and spam profiles too. Such profiles don't target groups with approval system turned-on.

How do you do that ?

The trick is to manipulate clicks on selected buttons using JavaScript. JavaScript is webpage scripting language and you can manipulated static pages by running scripts.
But to run the script you have to open the Developer Tools in your browser, it's not present in old and even some new browsers. I recommend Chrome, Safari or Mozilla - the latest version.

Code

Update: Facebook recently changed the layout of it's group membership request page, so the old code stopped working. I have updated the code which works with the current site. Thanks to A Suzy Meow for informing us about this change.

Copy this small code :

javascript:var cont = document.getElementById('Group_member_request_pagelet');
var ul = cont.childNodes[0];
var li = ul.getElementsByTagName('li'); // iterate on this

for (var i = 0; i < li.length; i++) {
var btnCont = li[i].getElementsByClassName('rfloat');
var ancHors = btnCont[0].getElementsByTagName('a');
ancHors[0].click(); // make the click
}

The code tells the browser click on the "Add" button next to each item (membership request item) in the list.

How to use the code?

For a person not familiar with scripting consoles, it might be tough for them to run the code. I wrote a step-by-step tutorial to make it easy for you :

1. Open the membership request page of the group in a modern web browser (Chrome, Firefox or Safari)
2. To open script console on different browsers :
   
   • Google Chrome - press CTRL+SHIFT+J
   • Mozilla Firefox - press CTRL+SHIFT+K
   • Apple Safari - press CTRL + ALT + I and when the developer tools appear, press ESC or click "Show Console" button to bring up the Console window
     
     
     
     
     
   • If you still didn't understand how to use the console, this article has more for you to learn and understand how to use Developer Tools Console.
3. Once you have opened the Console in your browser, paste the JavaScript code (provided above) and hit enter. When you paste the code inside the console it would look like this (The code you must enter is not the same as shown in the picture) : 
   
   
   
   
   
4. Just hit enter and the code will start doing it's job. It will automatically click on every "Confirm" button one-by-one on the group membership approval page until the number of buttons becomes 0. 

This was it, this small block of code can save you a lot of clicks and time. That's what code are for, to make the users life easier.  But depending on the number of request it may take some time to complete its job, leave the page opened and it will keep doing its job.

This code is very similar to the code to select multiple friends at once for Facebook events but with a little modification it works like a charm on  membership confirmation.

For any queries use the comment form below :) And thanks for reading.