create account

BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) by tarikhakan55

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @tarikhakan55 · (edited)
$24.27
BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) 
BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) 

<br> http://i.hizliresim.com/5Da5kD.jpg

**Video** : English Language<br>
**Tutorial** : BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) <br>
**Githup link**:  [SASS(SCSS)](https://github.com/sass/sass) <br>

>**Sass(Scss) is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass is actively supported and developed by a consortium of several tech companies and hundreds of developers.** [SASS(SCSS) More Information](http://sass-lang.com/)

**What We Can Learn?**

In this video tutorial, we created social media icon circle animation in sass or scss. Firstly we started creating icon list than we created a circle box for background color than we created icon values. as final action we made rotate effectFinally you can also learn, how are these codes implemented on your web sites.  

**We Learn About**

Transform  Values<br>
Used => translateX, translateY, scale, rotate<br>
Color<br>
Used => forestgreen , aliceblue, darkslategray, midnightblue, greenyellow <br>
Position<br>
Used =>absolute, relative<br>
And Old Commands<br>
Used =>  transition, margin, content, border-radius, list-style, z-index<br>


**Requirements**

1-Brackets Program<br>
2-Basic HTML code knowledge<br>
2-Basic SCSS code knowledge<br>


**Difficulty**

 Intermediate Level

**Description**

We will going  to learn SASS(SCSS) in this video. In the video we used; Transform  Values(translateX, translateY, scale, rotate), color(forestgreen , aliceblue, darkslategray, midnightblue, greenyellow),
position(absolute, relative) and old commands(transition, margin, content, border-radius, list-style, z-index).

**Video Tutorial - English Language - 720p**

<iframe width="560" height="315" src="https://www.youtube.com/embed/UdKtG5tlthU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br>

**Curriculum**

If you want to more learn about SASS you can follow me and you can see its below ! <br>



[Pagination User Interface Design](https://utopian.io/utopian-io/@tarikhakan55/building-pagination-user-interface-design-in-sass-scss)

[Box Products For Shopping Web Pages](https://utopian.io/utopian-io/@tarikhakan55/building-box-products-for-shopping-web-pages-in-sass-scss)

[Simple Flat Prıcıng Table Design](https://utopian.io/utopian-io/@tarikhakan55/building-simple-flat-pricing-table-design-for-all-web-pages-in-sass-scss)

[Profile User Interface Design Part 2](https://utopian.io/utopian-io/@tarikhakan55/part-2-building-profile-user-interface-design-for-all-web-pages-in-sass-scss)

[Profile User Interface Design Part 1](https://utopian.io/utopian-io/@tarikhakan55/part-1-building-profile-user-interface-design-for-all-web-pages-in-sass-scss)

[Responsive Mobile Contact Form](https://utopian.io/utopian-io/@tarikhakan55/building-responsive-mobile-contact-form-for-all-web-pages-in-sass-scss)

[Parallax Flat Web Page](https://utopian.io/utopian-io/@tarikhakan55/building-parallax-flat-web-page-for-all-web-pages-in-sass-scss)

[3D Logo Animation](https://utopian.io/utopian-io/@tarikhakan55/building-3d-logo-animation-for-all-web-pages-in-sass-scss)

[3D Mockup Presentation](https://utopian.io/utopian-io/@tarikhakan55/building-3d-mockup-presentation-for-all-book-pages-in-sass-scss)



Author : @tarikhakan55 <br>
Steemit Türkiye & Utopian-io
Community


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@tarikhakan55/building-social-media-icon-circle-animation-in-sass-scss">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 82 others
properties (23)
authortarikhakan55
permlinkbuilding-social-media-icon-circle-animation-in-sass-scss
categoryutopian-io
json_metadata{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":929845,"name":"sass","full_name":"sass/sass","html_url":"https://github.com/sass/sass","fork":false,"owner":{"login":"sass"}},"pullRequests":[],"platform":"github","type":"video-tutorials","tags":["utopian-io","utopian-io","tutorial","sass"],"users":["tarikhakan55"],"links":["https://github.com/sass/sass","http://sass-lang.com/","https://utopian.io/utopian-io/@tarikhakan55/building-pagination-user-interface-design-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-box-products-for-shopping-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-simple-flat-pricing-table-design-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/part-2-building-profile-user-interface-design-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/part-1-building-profile-user-interface-design-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-responsive-mobile-contact-form-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-parallax-flat-web-page-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-3d-logo-animation-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-3d-mockup-presentation-for-all-book-pages-in-sass-scss"],"moderator":{"account":"redart","time":"2018-02-25T11:50:14.775Z","reviewed":true,"pending":false,"flagged":false},"questions":[],"score":0}
created2018-02-24 18:34:06
last_update2018-02-25 11:50:15
depth0
children9
last_payout2018-03-03 18:34:06
cashout_time1969-12-31 23:59:59
total_payout_value17.064 HBD
curator_payout_value7.204 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,591
author_reputation38,506,275,601,183
root_title"BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) "
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,154,833
net_rshares5,551,640,108,304
author_curate_reward""
vote details (146)
@neokuduk ·
$0.04
Elinize sağlık ☺️
👍  
properties (23)
authorneokuduk
permlinkre-tarikhakan55-building-social-media-icon-circle-animation-in-sass-scss-20180225t161148089z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-02-25 16:11:51
last_update2018-02-25 16:11:51
depth1
children1
last_payout2018-03-04 16:11:51
cashout_time1969-12-31 23:59:59
total_payout_value0.032 HBD
curator_payout_value0.009 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length17
author_reputation4,802,827,094,367
root_title"BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,369,059
net_rshares7,968,533,255
author_curate_reward""
vote details (1)
@tarikhakan55 · 
Teşekkürler..
properties (22)
authortarikhakan55
permlinkre-neokuduk-re-tarikhakan55-building-social-media-icon-circle-animation-in-sass-scss-20180226t105219610z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-02-26 10:52:21
last_update2018-02-26 10:52:21
depth2
children0
last_payout2018-03-05 10:52:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length13
author_reputation38,506,275,601,183
root_title"BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,569,533
net_rshares0
@pars11 · 
Wow perfect design, thanks for tutorial.
properties (22)
authorpars11
permlinkre-tarikhakan55-building-social-media-icon-circle-animation-in-sass-scss-20180225t132818317z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-02-25 13:28:18
last_update2018-02-25 13:28:18
depth1
children1
last_payout2018-03-04 13:28:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length41
author_reputation13,018,135,268,251
root_title"BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,336,026
net_rshares0
@tarikhakan55 · 
You are welcome :]
properties (22)
authortarikhakan55
permlinkre-pars11-2018225t153131204z
categoryutopian-io
json_metadata{"tags":"utopian-io","app":"esteem/1.5.1","format":"markdown+html","community":"esteem"}
created2018-02-25 14:31:36
last_update2018-02-25 14:31:36
depth2
children0
last_payout2018-03-04 14:31:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length18
author_reputation38,506,275,601,183
root_title"BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) "
beneficiaries
0.
accountesteemapp
weight1,000
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,348,880
net_rshares0
@redart ·
$1.09
Thank you for the contribution. It has been approved.

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**
👍  
properties (23)
authorredart
permlinkre-tarikhakan55-building-social-media-icon-circle-animation-in-sass-scss-20180225t115034048z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-02-25 11:50:36
last_update2018-02-25 11:50:36
depth1
children2
last_payout2018-03-04 11:50:36
cashout_time1969-12-31 23:59:59
total_payout_value0.816 HBD
curator_payout_value0.270 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length172
author_reputation6,723,529,098,076
root_title"BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,318,834
net_rshares197,498,796,672
author_curate_reward""
vote details (1)
@tarikhakan55 · 
Thank you...
properties (22)
authortarikhakan55
permlinkre-redart-2018225t15321655z
categoryutopian-io
json_metadata{"tags":"utopian-io","app":"esteem/1.5.1","format":"markdown+html","community":"esteem"}
created2018-02-25 14:32:06
last_update2018-02-25 14:32:06
depth2
children0
last_payout2018-03-04 14:32:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length12
author_reputation38,506,275,601,183
root_title"BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) "
beneficiaries
0.
accountesteemapp
weight1,000
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,348,985
net_rshares0
@utopian.tip · 
Hey @redart, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
properties (22)
authorutopian.tip
permlinkre-re-tarikhakan55-building-social-media-icon-circle-animation-in-sass-scss-20180225t115034048z-20180226t003824
categoryutopian-io
json_metadata""
created2018-02-26 00:38:24
last_update2018-02-26 00:38:24
depth2
children0
last_payout2018-03-05 00:38:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length156
author_reputation238,310,597,885
root_title"BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,457,257
net_rshares0
@utopian-1up · 
<div class="pull-left">

![1UP-Kayrex_tiny.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515383984/ekyf2thxg7j2t0qro1h3.png)

</div>

<div class="text-justify">


### You've got upvoted by <code>Utopian-1UP</code>!
You can give up to ten [1UP](https://steemit.com/utopian-io/@steem-plus/steemplus-2-4-utopian-1up-is-here)'s to Utopian posts every day after they are accepted by a Utopian moderator and before they are upvoted by the official @utopian-io account. Install the @steem-plus browser extension to use 1UP. By following the 1UP-trail using [SteemAuto](https://steemauto.com/) you support great Utopian authors and earn high curation rewards at the same time. 

<hr>

1UP is neither organized nor endorsed by Utopian.io!

</div>
properties (22)
authorutopian-1up
permlink20180225t142851518z
categoryutopian-io
json_metadata{"app":"1up"}
created2018-02-25 14:28:51
last_update2018-02-25 14:28:51
depth1
children0
last_payout2018-03-04 14:28:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length764
author_reputation2,324,758,056,093
root_title"BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,348,302
net_rshares0
@utopian-io · 
### Hey @tarikhakan55 I am @utopian-io. I have just upvoted you!
#### Achievements
- WOW WOW WOW People loved what you did here. GREAT JOB!
- Seems like you contribute quite often. AMAZING!
#### Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a>
- Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)

**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
properties (22)
authorutopian-io
permlinkre-tarikhakan55-building-social-media-icon-circle-animation-in-sass-scss-20180227t181733314z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-02-27 18:17:33
last_update2018-02-27 18:17:33
depth1
children0
last_payout2018-03-06 18:17:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,067
author_reputation152,955,367,999,756
root_title"BUILDING SOCIAL MEDIA ICON CIRCLE ANIMATION IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,928,173
net_rshares0
Help/Feedback