{"id":28367,"date":"2017-01-14T18:00:02","date_gmt":"2017-01-14T23:00:02","guid":{"rendered":"http:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/"},"modified":"2017-03-30T15:13:58","modified_gmt":"2017-03-30T20:13:58","slug":"trendy-splitscreen-css3-animations","status":"publish","type":"post","link":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/","title":{"rendered":"[#Design #Tutorial]: Trendy Splitscreen Layout w\/ CSS3 Animations (Pt 1)"},"content":{"rendered":"

From Web Designer Wall – Design Trends and Tutorials<\/i> –Tutorial: Trendy Splitscreen Layout With CSS3 Animations<\/strong><\/a>:<\/p>\n

\u201c<\/span>
\n\"Tutorial:<\/a><\/em><\/p>\n

There is no better time than the end of the year for some fresh inspiration! One of the most popular trends this year, features splitscreen layouts, lots of white space, clean typography and subtle effects. With this playful trend in mind, I\u2019ve created a two-part tutorial to show you how to use flexbox, 3D transforms…<\/p>\n

\u201d<\/span><\/p>\n

 <\/p>\n

\n
READ MORE \u00bb<\/big><\/strong><\/a><\/div>\n
\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

There is no better time than the end of the year for some fresh inspiration! <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111],"tags":[],"class_list":["post-28367","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"\n[#Design #Tutorial]: Trendy Splitscreen Layout w\/ CSS3 Animations (Pt 1) - WHUZZUP!<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[#Design #Tutorial]: Trendy Splitscreen Layout w\/ CSS3 Animations (Pt 1) - WHUZZUP!\" \/>\n<meta property=\"og:description\" content=\"There is no better time than the end of the year for some fresh inspiration!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"WHUZZUP!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/\" \/>\n<meta property=\"article:author\" content=\"EricBrooksDotComWeb\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-14T23:00:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-03-30T20:13:58+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/ericbrooks.com\/images\/tutorials\/css-icon.png\" \/>\n<meta name=\"author\" content=\"Eric Brooks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:site\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eric Brooks\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/\"},\"author\":{\"name\":\"Eric Brooks\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\"},\"headline\":\"[#Design #Tutorial]: Trendy Splitscreen Layout w\\\/ CSS3 Animations (Pt 1)\",\"datePublished\":\"2017-01-14T23:00:02+00:00\",\"dateModified\":\"2017-03-30T20:13:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/\"},\"wordCount\":85,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/ericbrooks.com\\\/images\\\/tutorials\\\/css-icon.png\",\"articleSection\":[\"css\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/\",\"name\":\"[#Design #Tutorial]: Trendy Splitscreen Layout w\\\/ CSS3 Animations (Pt 1) - WHUZZUP!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/ericbrooks.com\\\/images\\\/tutorials\\\/css-icon.png\",\"datePublished\":\"2017-01-14T23:00:02+00:00\",\"dateModified\":\"2017-03-30T20:13:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/#primaryimage\",\"url\":\"http:\\\/\\\/ericbrooks.com\\\/images\\\/tutorials\\\/css-icon.png\",\"contentUrl\":\"http:\\\/\\\/ericbrooks.com\\\/images\\\/tutorials\\\/css-icon.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/trendy-splitscreen-css3-animations\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[#Design #Tutorial]: Trendy Splitscreen Layout w\\\/ CSS3 Animations (Pt 1)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"name\":\"WHUZZUP!\",\"description\":\"What's new at EricBrooks.Com plus news and gossip all over CyberTown\",\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\",\"name\":\"WHUZZUP!\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"contentUrl\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"width\":512,\"height\":512,\"caption\":\"WHUZZUP!\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/EricBrooksDotComWeb\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\",\"https:\\\/\\\/www.instagram.com\\\/ericbrooksdotcom\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ericbrooksdotcom\",\"https:\\\/\\\/myspace.com\\\/ericbrooksdotcom\",\"https:\\\/\\\/www.pinterest.com\\\/ericbrookscom\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/ericbrooksdotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\",\"name\":\"Eric Brooks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"caption\":\"Eric Brooks\"},\"description\":\"Web & Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.\",\"sameAs\":[\"https:\\\/\\\/ericbrooks.com\",\"EricBrooksDotComWeb\",\"ericbrooksdotcom\",\"ericbrookscom\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\"],\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/author\\\/site-admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[#Design #Tutorial]: Trendy Splitscreen Layout w\/ CSS3 Animations (Pt 1) - WHUZZUP!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/","og_locale":"en_US","og_type":"article","og_title":"[#Design #Tutorial]: Trendy Splitscreen Layout w\/ CSS3 Animations (Pt 1) - WHUZZUP!","og_description":"There is no better time than the end of the year for some fresh inspiration!","og_url":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/","og_site_name":"WHUZZUP!","article_publisher":"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","article_author":"EricBrooksDotComWeb","article_published_time":"2017-01-14T23:00:02+00:00","article_modified_time":"2017-03-30T20:13:58+00:00","og_image":[{"url":"http:\/\/ericbrooks.com\/images\/tutorials\/css-icon.png","type":"","width":"","height":""}],"author":"Eric Brooks","twitter_card":"summary_large_image","twitter_creator":"@EricBrooksCom","twitter_site":"@EricBrooksCom","twitter_misc":{"Written by":"Eric Brooks"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/#article","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/"},"author":{"name":"Eric Brooks","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a"},"headline":"[#Design #Tutorial]: Trendy Splitscreen Layout w\/ CSS3 Animations (Pt 1)","datePublished":"2017-01-14T23:00:02+00:00","dateModified":"2017-03-30T20:13:58+00:00","mainEntityOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/"},"wordCount":85,"commentCount":1,"publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/#primaryimage"},"thumbnailUrl":"http:\/\/ericbrooks.com\/images\/tutorials\/css-icon.png","articleSection":["css"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/","url":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/","name":"[#Design #Tutorial]: Trendy Splitscreen Layout w\/ CSS3 Animations (Pt 1) - WHUZZUP!","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/#primaryimage"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/#primaryimage"},"thumbnailUrl":"http:\/\/ericbrooks.com\/images\/tutorials\/css-icon.png","datePublished":"2017-01-14T23:00:02+00:00","dateModified":"2017-03-30T20:13:58+00:00","breadcrumb":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/#primaryimage","url":"http:\/\/ericbrooks.com\/images\/tutorials\/css-icon.png","contentUrl":"http:\/\/ericbrooks.com\/images\/tutorials\/css-icon.png"},{"@type":"BreadcrumbList","@id":"https:\/\/ericbrooks.com\/whuzzup\/trendy-splitscreen-css3-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ericbrooks.com\/whuzzup\/"},{"@type":"ListItem","position":2,"name":"[#Design #Tutorial]: Trendy Splitscreen Layout w\/ CSS3 Animations (Pt 1)"}]},{"@type":"WebSite","@id":"https:\/\/ericbrooks.com\/whuzzup\/#website","url":"https:\/\/ericbrooks.com\/whuzzup\/","name":"WHUZZUP!","description":"What's new at EricBrooks.Com plus news and gossip all over CyberTown","publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ericbrooks.com\/whuzzup\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization","name":"WHUZZUP!","url":"https:\/\/ericbrooks.com\/whuzzup\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/","url":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","contentUrl":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","width":512,"height":512,"caption":"WHUZZUP!"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","https:\/\/x.com\/EricBrooksCom","https:\/\/www.instagram.com\/ericbrooksdotcom\/","https:\/\/www.linkedin.com\/in\/ericbrooksdotcom","https:\/\/myspace.com\/ericbrooksdotcom","https:\/\/www.pinterest.com\/ericbrookscom\/","https:\/\/www.youtube.com\/user\/ericbrooksdotcom"]},{"@type":"Person","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a","name":"Eric Brooks","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","url":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","caption":"Eric Brooks"},"description":"Web & Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.","sameAs":["https:\/\/ericbrooks.com","EricBrooksDotComWeb","ericbrooksdotcom","ericbrookscom\/","https:\/\/x.com\/EricBrooksCom"],"url":"https:\/\/ericbrooks.com\/whuzzup\/author\/site-admin\/"}]}},"_links":{"self":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/28367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/comments?post=28367"}],"version-history":[{"count":4,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/28367\/revisions"}],"predecessor-version":[{"id":29273,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/28367\/revisions\/29273"}],"wp:attachment":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/media?parent=28367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/categories?post=28367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/tags?post=28367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}