Giphy Arcade Lets You Create and Play Mini Games

Giphy has launched Giphy Arcade, which lets you create, play, and share your own mini-games. Giphy is best known as a search engine for GIFs, and Giphy Arcade is an attempt to bring the thinking behind GIFs to gaming. And it kinda works.

How to Create and Play Giphy Arcade Games

Giphy Arcade is essentially a database of mini-games you can play online. There are a limited number of styles of game available, but beyond that every element is customizable. So while the gameplay will feel familiar, the art style and music may not.

Giphy Arcade has three different components. At its core, it lets you play mini-games quickly and easily on the web regardless of the device you’re using. However, you can also remix the games to your own liking, and share them online with a single link.

quit playing games with my ? (and start playing games with my GIFs)

Introducing: #GIPHYArcade! Bite-sized microgames ready for you to play, remix, and share.

??https://t.co/sOb2uTRgm5 pic.twitter.com/cnrOu4gzUZ

— GIPHY (@GIPHY) October 16, 2019

To create a game from scratch you first choose a game template. Game styles include Floppy Bard, Runner, Blast ‘Em Up, and Brick Buster. Then, you choose your hero and other graphical components, plus your soundtrack. Finally, give it a title, and it’s ready.

You can also remix any game you play on Giphy Arcade, customizing it with your own characters and components. Either way, your game will be given a simple URL which you can share with family, friends, and/or everyone online as easily as you would share a GIF.

Giphy Arcade Could Turn Everyone Into Gamers

The games on Giphy Arcade aren’t going to win any awards. They’re simple twists on old-skool genres we’ve all seen before. However, they’re fun to play, and the ability to create your own web-based mini-game is rather compelling. See my effort, Chuck Norris Rulez.

Giphy Arcade could help turn more people into gamers too. Because even your gran could get the hang of these simple efforts. And once your gran has become a gamer, she should check out our list of addictive mobile games you can play for five minutes at a time.

Read the full article: Giphy Arcade Lets You Create and Play Mini Games

Read Full Article

The Essential CSS3 Properties Cheat Sheet

Cascading Style Sheets or CSS define the look and feel of the web as we know it. While HTML and JavaScript focus on the functional side of the web, CSS deals with the visual aspects of it.

Need help navigating the world that is CSS3? Download our "Essential CSS3 Properties Cheat Sheet" today!

After you’ve learned how to build static webpages with HTML, it’s time to discover how to style them and make them presentable with CSS. And our CSS3 properties cheat sheet below can help you with that! It covers the essential syntax you need to know about in CSS3, which is the latest version of CSS.

A working knowledge of CSS helps you customize colors, fonts, borders, backgrounds, layouts, and much more on webpages in a streamlined manner. What’s more, it comes in handy while designing web and mobile applications too.

FREE DOWNLOAD: This cheat sheet is available as a downloadable PDF from our distribution partner, TradePub. You will have to complete a short form to access it for the first time only. Download Essential CSS3 Properties Cheat Sheet.

The Essential CSS3 Properties Cheat Sheet

Shortcut	Action
Background Properties
background	Defines a variety of background properties within one declaration.
background-attachment	Specifies whether the background image is fixed or scrolls with the webpage.
background-color	Defines the background color of an element on the webpage.
background-image	Defines an element’s background image.
background-clip	Specifies how far the background images or color extends for an element.
background-origin	Specifies the positioning area of the background images.
background-position	Defines the origin of a background image.
background-repeat	Specifies how the background image is tiled.
background-size	Specifies the size of the background images.
Border Properties
border	Sets the border width, style, and color for all four sides of an element.
border-bottom	Sets the width, style, and color for the bottom border of an element.
border-bottom-color	Sets the color of the bottom border of an element.
border-bottom-left-radius	Defines the shape of the bottom-left border corner of an element.
border-bottom-right-radius	Defines the shape of the bottom-right border corner of an element.
border-bottom-style	Sets the style of the bottom border of an element.
border-bottom-width	Sets the width of the bottom border of an element.
border-color	Sets the color of the border on all the four sides of an element.
border-image	Specifies how an image is to be used in place of the border styles.
border-image-outset	Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat	Specifies how the border image is tiled.
border-image-slice	Specifies the inward offsets of the image-border.
border-image-source	Specifies the location of the image to be used as a border.
border-image-width	Specifies the width of the image-border.
border-left	Sets the width, style, and color of the left border of an element.
border-left-color	Sets the color of the left border of an element.
border-left-style	Sets the style of the left border of an element.
border-left-width	Sets the width of the left border of an element.
border-radius	Defines the shape of the border corners of an element.
border-right	Sets the width, style, and color of the right border of an element.
border-right-color	Sets the color of the right border of an element.
border-right-style	Sets the style of the right border of an element.
border-right-width	Sets the width of the right border of an element.
border-style	Sets the style of the border on all the four sides of an element.
border-top	Sets the width, style, and color of the top border of an element.
border-top-color	Sets the color of the top border of an element.
border-top-left-radius	Defines the shape of the top-left border corner of an element.
border-top-right-radius	Defines the shape of the top-right border corner of an element.
border-top-style	Sets the style of the top border of an element.
border-top-width	Sets the width of the top border of an element.
border-width	Sets the width of the border on all the four sides of an element.
Color Properties
color	Defines and sets the color for text.
opacity	Defines the transparency of an element.
Dimension Properties
height	Defines the height of an element.
max-height	Defines the maximum height of an element.
max-width	Defines the maximum width of an element.
min-height	Defines the minimum height of an element.
min-width	Defines the minimum width of an element.
width	Specify the width of an element.
Generated Content Properties
content	Inserts generated content.
quotes	Specifies quotation marks for embedded quotations.
counter-reset	Creates or resets one or more counters.
counter-increment	Increments one or more counter values.
Flexible Box Layout
align-content	Specifies the alignment of flexible container's items.
align-items	Specifies the default alignment for items.
align-self	Specifies the alignment for selected items.
flex	Specifies the components of a flexible length.
flex-basis	Specifies the initial main size of the flex item.
flex-direction	Specifies the direction of the flexible items.
flex-flow	A shorthand property for the flex-direction and the flex-wrap properties.
flex-grow	Specifies how the flex item will grow relative to the other items inside the flex container.
flex-shrink	Specifies how the flex item will shrink relative to the other items inside the flex container.
flex-wrap	Specifies whether the flexible items should wrap or not.
justify-content	Specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved.
order	Specifies the order in which a flex items are displayed and laid out within a flex container.
Font Properties
font	Defines a variety of font properties within one declaration like the font-style, font-variant, font-weight, font-size/line-height, and the font-family.
font-family	Defines a list of fonts for element.
font-size	Defines the font size for the text.
font-size-adjust	Preserves the readability of text when font fallback occurs.
font-stretch	Selects a normal, condensed, or expanded face from a font.
font-style	Defines the font style for the text.
font-variant	Specifies the font variant.
font-weight	Specifies the font weight of the text.
List Properties
list-style	Defines the display style for a list and list elements.
list-style-image	Specifies the image to be used as a list-item marker.
list-style-position	Specifies the position of the list-item marker.
list-style-type	Specifies the marker style for a list-item.
Margin Properties
margin	Sets the margin on all four sides of the element.
margin-bottom	Sets the bottom margin of the element.
margin-left	Sets the left margin of the element.
margin-right	Sets the right margin of the element.
margin-top	Sets the top margin of the element.
Multi-Column Layout Properties
column-count	Specifies the number of columns in a multi-column element.
column-fill	Specifies how columns will be filled.
column-gap	Specifies the gap between the columns in a multi-column element.
column-rule	Specifies a straight line, or "rule", to be drawn between each column in a multi-column element.
column-rule-color	Specifies the color of the rules drawn between columns in a multi-column layout.
column-rule-style	Specifies the style of the rule drawn between the columns in a multi-column layout.
column-rule-width	Specifies the width of the rule drawn between the columns in a multi-column layout.
column-span	Specifies how many columns an element spans across in a multi-column layout.
column-width	Specifies the optimal width of the columns in a multi-column element.
columns	A shorthand property for setting column-width and column-count properties.
column-count	Specifies the number of columns in a multi-column element.
Outline Properties
outline	Sets the width, style, and color for all four sides of an element's outline.
outline-color	Sets the color of the outline.
outline-offset	Set the space between an outline and the border edge of an element.
outline-style	Sets a style for an outline.
outline-width	Sets the width of the outline.
Padding Properties
padding	Sets the padding on all four sides of the element.
padding-bottom	Sets the padding to the bottom side of an element.
padding-left	Sets the padding to the left side of an element.
padding-right	Sets the padding to the right side of an element.
padding-top	Sets the padding to the top side of an element.
Print Properties
page-break-after	Inserts a page break after an element.
page-break-before	Inserts a page break before an element.
page-break-inside	Inserts a page break inside an element.
Table Properties
border-collapse	Specifies whether table cell borders are connected or separated.
border-spacing	Sets the spacing between the borders of adjacent table cells.
caption-side	Specifies the position of table's caption.
empty-cells	Shows or hides borders and backgrounds of empty table cells.
table-layout	Specifies a table layout algorithm.
border-collapse	Specifies whether table cell borders are connected or separated.
Text Properties
direction	Defines the text direction/writing direction.
tab-size	Specifies the length of the tab character.
text-align	Sets the horizontal alignment of inline content.
text-align-last	Specifies how the last line of a block or a line right before a forced line break is aligned when text-align is justify.
text-decoration	Specifies the decoration added to text.
text-decoration-color	Specifies the color of the text-decoration-line.
text-decoration-line	Specifies what kind of line decorations are added to the element.
text-decoration-style	Specifies the style of the lines specified by the text-decoration-line property
text-indent	Indents the first line of text.
text-justify	Specifies the justification method to use when the text-align property is set to justify.
text-overflow	Specifies how the text content will be displayed, when it overflows the block containers.
text-shadow	Applies one or more shadows to the text content of an element.
text-transform	Transforms the case of the text.
line-height	Sets the height between lines of text.
vertical-align	Sets the vertical positioning of an element relative to the current text baseline.
letter-spacing	Sets the extra spacing between letters.
word-spacing	Sets the spacing between words.
white-space	Specifies how white space inside the element is handled.
word-break	Specifies how to break lines within words.
word-wrap	Specifies whether to break words when the content overflows the boundaries of its container.
Transform Properties
backface-visibility	Specifies whether or not the "back" side of a transformed element is visible when facing the user.
perspective	Defines the perspective from which all child elements of the object are viewed.
perspective-origin	Defines the origin (the vanishing point for the 3D space) for the perspective property.
transform	Applies a 2D or 3D transformation to an element.
transform-origin	Defines the origin of transformation for an element.
transform-style	Specifies how nested elements are rendered in 3D space.
Transition Properties
transition	Defines the transition between two states of an element.
transition-delay	Specifies when the transition effect will start.
transition-duration	Specifies the number of seconds or milliseconds a transition effect should take to complete.
transition-property	Specifies the names of the CSS properties to which a transition effect should be applied.
transition-timing-function	Specifies the speed curve of the transition effect.
Visual Formatting Properties
display	Specifies how an element is displayed onscreen.
position	Specifies how an element is positioned.
top	Specifies the location of the top edge of the positioned element.
right	Specifies the location of the right edge of the positioned element.
bottom	Specifies the location of the bottom edge of the positioned element.
left	Specifies the location of the left edge of the positioned element.
float	Specifies whether or not a box should float.
clear	Specifies the placement of an element in relation to floating elements.
z-index	Specifies a layering or stacking order for positioned elements.
overflow	Specifies the treatment of content that overflows the element's box.
overflow-x	Specifies how to manage the content when it overflows the width of the element's content area.
overflow-y	Specifies how to manage the content when it overflows the height of the element's content area.
resize	Specifies whether or not an element is resizable by the user.
clip	Defines the clipping region.
visibility	Specifies whether or not an element is visible.
cursor	Specifies the type of cursor.
box-shadow	Applies one or more drop-shadows to the element's box.
box-sizing	Alters the default CSS box model.
Animation Properties
animation	Specifies the behavior of all animations.
animation-delay	Specifies when the animation will start with a delay.
animation-direction	Specifies whether the animation should play forward, backward, or in alternate cycles.
animation-duration	Specifies the number of seconds or milliseconds an animation should take to complete one cycle.
animation-fill-mode	Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-iteration-count	Specifies the number of times an animation cycle should be played before stopping.
animation-name	Specifies the name of @keyframes defined animations that should be applied to the selected element.
animation-play-state	Specifies whether the animation is running or paused.
animation-timing-function	Specifies how a CSS animation should progress over the duration of each cycle.

Go Beyond the Basics of CSS

Once you’ve mastered the building blocks of CSS, we recommend upgrading your CSS skills and learning JavaScript to take your webpages to a new level of stunning.

Image Credit: Nick Karvounis on Unsplash

Read the full article: The Essential CSS3 Properties Cheat Sheet

Read Full Article

Reel vs. Real: 5 Sites Where Famous Celebrities Reveal Their Other Side

When you take a celebrity away from the carefully PR-controlled interviews and staged interactions, what are they really like? Here are five glimpses into a whole new side of celebrities and famous people.

We aren’t just talking about Hollywood here, although that’s usually the focus. It can be musicians, athletes, politicians, models, artists, businesspeople, and anyone else who is recognized widely. You’ll read tales of people who encountered them in real life, people who didn’t know who they are, and get as close as you can to drunken confessions. Read on…

1. Mean Stars (Web): Celebrity Encounters in Real Life

“One time, I was in an elevator and you won’t believe who got on with me!” Everybody has a celebrity encounter they like to talk about. Mean Stars is a collection of stories from regular folks who met famous people in real life.

The website focuses mainly on actors and musicians, but there is the odd athlete or politician too. Each celebrity has a 100-point rating to show how mean or nice they are, based on an average of all stories uploaded about them. Quite a few stories even have a photograph to go with it.

You can quickly browse the Nicest or Meanest celebrities, check those with the most stories about them, or click “Random” for a stroke of serendipity. Here’s a quick spoiler: the meanest celebrity is deadmau5 while the nicest celebrity is Chuck Norris. Who would have guessed that?

2. Comments By Celebs (Instagram): Influencer Replies On Instagram

View this post on Instagram

The One Where Jen Breaks Instagram. #CommentsByCelebs

A post shared by Comments By Celebs (@commentsbycelebs) on Oct 15, 2019 at 10:49am PDT

Do you follow someone famous on Instagram? Chances are, other celebrities do that too. It seems to be the social media platform of choice for most actors, models, and athletes. And often, such verified influencers comment on and reply to each other’s posts. It’s easy to miss these interactions, which is why Comments By Celebs curates them.

Emma Diamond and Julie Kramer scour Instagram for what celebrities are posting in someone’s cascading comments section. You’d be surprised by how much goes unnoticed. For instance, Jennifer Aniston’s post with her co-stars from Friends had over 23 famous people replying to it. And you can see them all if you follow Comments By Celebs.

There are three other sub-accounts from the same team:

1. Comments By Athletes: To see what sportspersons are talking about with each other.
2. Comments By Bravo: Comments by and related to Bravo TV.
3. Comments By Bachelor: Comments from participants of the Bachelor series.

3. Don’t You Know Who I Am (Web): When Celebs Aren’t Recognized

In the world of social media, it’s easy for someone to mistake a celebrity’s real Twitter account for a fake one, or vice versa. Sometimes, people don’t recognize a famous person even in real life. All such interactions are recorded in the subreddit r/DontYouKnowWhoIAm.

The entries are a mixture of comeuppances, humorous encounters, and satisfying stories of instant justice. For example, one of the most popular entries has Ed Solomon talking about how his mansplaining was rebuffed when he tried to weigh in on a discussion about Men In Black. For those who don’t know, Solomon wrote Men In Black.

It’s not always a celebrity encounter, but the subreddit is super fun nonetheless. The only thing more fun than regular schadenfreude is watching someone make a complete fool of themselves in front of a famous person.

4. Hot Ones (Web / YouTube): Closest Celebs Get to Drunk Interviews

If you haven’t seen Hot Ones yet, you’re missing one of the best things on the internet. In this YouTube series, host Sean Evans interviews a new celebrity in each episode, while challenging them to eat 10 increasingly spicier chicken wings.

Now, you know celebrities aren’t going to show up drunk for interviews. But when they’ve bitten into a sauce that registers above one million Scoville units, it has a similar effect where they let their guard down. Hot Ones has some excellent confessions and accidental outbursts as famous people get candid… and cuss freely.

But it’s not about the wings as much as it is about Evans and his crack researchers (I personally think they’re even better than the famous Nardwuar). Time after time, Evans has shocked interviewees with some obscure tidbit. There are literally compilations of celebrities complimenting the Hot Ones team for their thoroughness and creative questions.

Each episode is a little under half an hour. So far, Evans has interviewed a range of famous celebrities including Scarlett Johansson, Gordon Ramsay, Stone Cold Steve Austin, Crissy Tiegen, Seth Meyers, Noel Gallagher, and more. If you like it, also check out the spin-off Truth Or Dab.

5. Disgraceland (Podcast): How Musicians Got Away With Crimes

It should come as no surprise that rock stars, rappers, and pop musicians have often flirted with the law of the land. But you’d be shocked by just how much they’ve got away with. The podcast Disgraceland is full of these true crime stories about musicians.

In each season, musician Jake Brennan hosts 12 episodes detailing stories about everyone from John Lennon to Snoop Dogg. It goes beyond just scandalous. There are tales of how Jerry Lee Lewis and Sam Cooke both got away with murder, John Lennon’s assassination, and the Rolling Stones perhaps trafficking heroin.

This isn’t a true crime podcast even though it sells itself as one. Brennan enjoys the act of story-telling more than anything else. So take the stories with a pinch of salt even if they are based in reality. You might want to do a little more research at times, beyond the glossary of sources provided by Disgraceland.

You Can Ask Celebs Questions Directly!

Celebrities can no longer ignore the internet, and that opens avenues for you to interact directly with them. Reddit regularly hosts Ask Me Anything (AMAs), while celebrities active on Twitter or Instagram do quick AMAs on their timeline.

If you’re not on any of these social networks, you can ask questions to celebrities through Google. It’s a niche Google service, but it’s kind of fun!

Read the full article: Reel vs. Real: 5 Sites Where Famous Celebrities Reveal Their Other Side

Read Full Article

MediaLab acquires messaging app Kik, expanding its app portfolio

Popular messaging app Kik is, indeed, “here to stay” following an acquisition by the Los Angeles-based multimedia holding company, MediaLab.

It echoes the same message from Kik’s chief executive Tim Livingston last week when he rebuffed earlier reports that the company would shut down amid an ongoing battle with the U.S. Securities and Exchange Commission. Livingston had tweeted that Kik had signed a letter-of-intent with a “great company,” but that it was “not a done deal.”

Now we know the the company: MediaLab. In a post on Kik’s blog on Friday the MediaLab said that it has “finalized an agreement” to acquire Kik Messenger.

“Kik is one of those amazing places that brings us back to those early aspirations,” the blog post read. “Whether it be a passion for an obscure manga or your favorite football team, Kik has shown an incredible ability to provide a platform for new friendships to be forged through your mobile phone.”

MediaLab is a holding company that owns several other mobile properties, including anonymous social network Whisper and mixtape app DatPiff. In acquiring Kik, the holding company is expanding its mobile app portfolio.

MediaLab said it has “some ideas” for developing Kik going forwards, including making the app faster and reducing the amount of unwanted messages and spam bots. The company said it will introduce ads “over the coming weeks” in order to “cover our expenses” of running the platform.

Buying the Kik messaging platform adds another social media weapon to the arsenal for MediaLab and its chief executive, Michael Heyward.

Heyward was an early star of the budding Los Angeles startup community with the launch of the anonymous messaging service, Whisper nearly 8 years ago. At the time, the company was one of a clutch of anonymous apps — including Secret and YikYak — that raised tens of millions of dollars to offer online iterations of the confessional journal, the burn book, and the bathroom wall (respectively).

In 2017, TechCrunch reported that Whisper underwent significant layoffs to stave off collapse and put the company on a path to profitability.

At the time Whisper had roughly 20 million monthly active users across its app and website, which the company was looking to monetize through programmatic advertising, rather than brand-sponsored campaigns that had provided some of the company’s revenue in the past. Through widgets, the company had an additional 10 million viewers of its content per-month using various widgets and a reach of around 250 million through Facebook and other social networks on which it published posts.

People familiar with the company said at the time that it was seeing gross revenues of roughly $1 million and was going to hit $12.5 million in revenue for that calendar year. By 2018 that revenue was expected to top $30 million, according to sources at the time.

Anonymous app Whisper lays off 20% of staff to survive

The flagship Whisper app let people post short bits of anonymous text and images that other folks could like or comment about. Heyward intended it to be a way for people to share more personal and intimate details —  to be a social network for confessions and support rather than harassment.

The idea caught on with investors and Whisper managed to raise $61 million from investors including Sequoia, Lightspeed Venture Partners, and Shasta Ventures. Whisper’s last round was a $36 million Series C back in 2014.

Fast forward to 2018 when Secret had been shut down for three years while YikYak also went bust — selling off its engineering team to Square for around $1 million. Whisper, meanwhile, seemingly set up MediaLab as a holding company for its app and additional assets that Heyward would look to roll up. The company filed registration documents in California in June 2018.

According to the filings, Susan Stone, a partner with the investment firm Sierra Wasatch Capital, is listed as a director for the company.

Heyward did not respond to a request for comment.

Zack Whittaker contributed reporting for this article. 

Read Full Article